masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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

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

WBOY

Lepaskan： 2016-06-24 11:36:27

asal

1404 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，，，渐变。。。

Label berkaitan：

一个图片如何跨越2个不同背景颜色的Div？

sumber：php.cn

Artikel sebelumnya：html中元素动态生成导致重叠引起布局错乱_html/css_WEB-ITnose Artikel seterusnya：为什么XHTML大于号不转译也能识别？_html/css_WEB-ITnose

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

Artikel terbaru oleh pengarang