html
1 <section class="bg"> 2 <div class="inner"> 3 <img src="img/part0_img01.png"> 4 </div> 5 </section>
css
1 2 3.bg { 4 background: url(img/part1_img02.jpg) left/100% 100% no-repeat; 5 position: relative; 6 7 width: 100%; 8 height: 500px; 9 position: relative 10} 11 12.bg .inner { 13 14 background-color: transparent; 15 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #000), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #000), color-stop(.75, #000), color-stop(.75, transparent), to(transparent)); 16 -webkit-background-size: 4px 4px; 17 width: 100%; 18 height: 100% 19} 20 21.bg img { 22 width: 60%; 23 position: absolute; 24 top: 50%; 25 left: 50%; 26 transform: translate(-50%, -50%) 27} 28
試しにストライプ(bg-inner)を外したところチカチカはおさまりました。
なぜストライプをつけるとチカチカしてしまうのでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/15 03:19
2020/01/15 03:34
退会済みユーザー
2020/01/15 08:05