主页 / 问题 / 698718
Accepted
Sevastopol'
Asked:2020-07-28 06:17:21 +0000 UTC2020-07-28 06:17:21 +0000 UTC

如何用CSS制作虚线背景？

  • 772

如何制作带点的CSS背景？

.bg {
  width: 100%;
  height: 50px;
  background: url(https://sport.mail.ru/img/_main/subnav.png)
}
<div class="bg"></div>

css

4 个回答

  1. Best Answer

    坡度：

    .dotted {
  padding: 2.25em 1.6875em;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  
  width:100%;
  height: 50px;
}
    <div class="dotted"></div>

    • 27

  2. SVG变体

    .bg {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><circle r="1" fill="%23888" /></svg>') repeat;
  height: 50px;
  width: 100%;
}
    <div class="bg"></div>

    • 13

  3. 我试着自己做了这样一个背景如下，但是不太成功：

    .bg {
  width: 100%;
  height: 50px;
  background: radial-gradient(#000 5%, transparent 20%) 0 0, radial-gradient(rgba(0,0,0,.1) 1%, transparent 1%) 50px 50px;
  background-color: #fff;
  background-size: 5px 5px;
}
    <div class="bg"></div>

    • 9

  4. SVG 模式

    <svg width="400" height="400" viewBox="0 0 400 400" >
<defs>
<pattern id="patt"
             x="0" y="0" width="4" height="4"
             patternUnits="userSpaceOnUse" >
            <circle cx="2" cy="2" r="1" fill="grey" opacity="0.2"  />
</pattern>
</defs>
<rect width="100%" height="100%" style="stroke: #000000; fill: url(#patt);" />
</svg>

    黑色图案 

    <svg width="400" height="400" viewBox="0 0 400 400" >
<defs>
<pattern id="patt"
             x="0" y="0" width="3" height="3"
             patternUnits="userSpaceOnUse" >
            
           <g>		
           <circle cx="3" cy="3" r="3" fill="black"  />
		   <circle cx="3" cy="3" r="1" fill="white"  />
		   
		   </g>
</pattern>
</defs>
<rect width="100%" height="100%" style="stroke: #000000; fill: url(#patt);" />
</svg>

    • 4

相关问题