[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
290: 2023/12/22(金)22:02 ID:??? AAS
画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな
291: 2023/12/22(金)22:08 ID:??? AAS
矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい
手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし
292: 2023/12/23(土)10:02 ID:??? AAS
288です
ありがとうございます！ おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！
293(1): 2023/12/24(日)15:43 ID:??? AAS
filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな
294: 2023/12/24(日)20:49 ID:??? AAS
ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？
295: 2024/01/02(火)01:34 ID:??? AAS
>>293
外部ﾘﾝｸ:developer.mozilla.org
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。
まあいつもの通りでSafariが悪い
296: 2024/01/02(火)19:30 ID:??? AAS
開発側にとっては謎仕様やな
297: 2024/01/02(火)22:07 ID:??? AAS
謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか
298: 2024/01/03(水)01:39 ID:??? AAS
fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど
299: [kotomitanaka1021@gmail.com] 2024/01/03(水)14:00 ID:??? AAS
初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします
300(3): 2024/01/03(水)14:51 ID:??? AAS
position:absolute;
で自由に配置しよう！
301: 2024/01/03(水)16:42 ID:gZE/gVdw(1/4) AAS
>>300できました！！！すごい！ありがとうございます！！本当に助かりました！
302: 2024/01/03(水)17:00 ID:gZE/gVdw(2/4) AAS
>>300
すみませんposition:absolute;ってテキストには使えないんですか？
303(1): 2024/01/03(水)17:00 ID:gZE/gVdw(3/4) AAS
>>300
すみませんposition:absolute;ってテキストには使えないんですか？
304: 2024/01/03(水)17:18 ID:??? AAS
>>303
divなりspanなり、タグでテキストを囲えばいい
305: 2024/01/03(水)19:36 ID:gZE/gVdw(4/4) AAS
h2 {
color:#66cc99;
font-size: 85px;
font-family: serif;
width: 1500px;
height: 120px;
background-color: #ccffcc;
padding: 2px;
left: 5px;
top: 1px;
省3
306(1): 2024/01/03(水)19:41 ID:??? AAS
ゴールがわからないから答えようがない
こういうサービスでコード張って
外部ﾘﾝｸ:jsfiddle.net
目指す形を画像で出そう
307(2): 2024/01/04(木)03:17 ID:??? AAS
幅1500、高さ120の範囲に
見出しをサイズ85pxでレイアウトしたいってことなら
<div class='bg'>
<h2>タイトル</h2>
</div>
って形に変えてh2だけでレイアウトしない
ちなみにcssは
.bg {
position: relative;
width: 1500px;
省13
308: 2024/01/04(木)08:01 ID:Zt3WiyEq(1/2) AAS
>>306 ありがとうございます！
>>307 ハイ！
309(1): 2024/01/04(木)08:47 ID:Zt3WiyEq(2/2) AAS
>>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか？
上下前次1-新書関写板覧索設栞歴
あと 693 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.015s