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

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

WBOY
WBOYoriginal
2016-06-24 11:36:271392parcourir

如图所示,想在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>

css3,,,渐变。。。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn