Rumah > hujung hadapan web > html tutorial > 一个图片如何跨越2个不同背景颜色的Div?_html/css_WEB-ITnose

一个图片如何跨越2个不同背景颜色的Div?_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:36:27
asal
1447 orang telah melayarinya

如图所示,想在2个不同颜色的层间放个图标,黑白相邻的层不能用黑加白的图片做背景图片。
  这个该如何实现?


回复讨论(解决方案)

CSS3 渐变

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <style>    #box{      position:relative;      width:100px;      height:0;      border-top:25px solid #000;      border-bottom:25px solid #fff;    }    .img{      position:absolute;      top:-50%;      margin-top:-12.5px;      left:50%;      margin-left:-12.5px;      width:25px;      height:25px;      background:red;      border-radius:25px;    }  </style></head><body>  <div id="box">    <div class="img"></div>  </div></body></html>
Salin selepas log masuk

css3,,,渐变。。。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan