CSS3实现各种纹理背景效果
<!DOCTYPE html>
<head>
<title>CSS3實現(xiàn)各種紋理背景效果_網(wǎng)頁代碼站(www.webdm.cn)</title>
<style>
body{font-family: Georgia, serif;}.stripes{height: 250px;width: 375px;float: left;margin: 10px;-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px;-moz-box-shadow: 1px 1px 8px gray;-webkit-box-shadow: 1px 1px 8px gray;box-shadow: 1px 1px 8px gray;}.angled{background-color: #ac0;background-p_w_picpath: -webkit-gradient(linear, 0 100%, 100% 0,color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),to(transparent));background-p_w_picpath: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);background-p_w_picpath: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);background-p_w_picpath: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);}.angled-135{background-color: #c16;background-p_w_picpath: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),to(transparent));background-p_w_picpath: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);background-p_w_picpath: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);background-p_w_picpath: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent);}.horizontal{background-color: #0ae;background-p_w_picpath: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));background-p_w_picpath: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-p_w_picpath: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-p_w_picpath: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}.vertical{background-color: #f90;background-p_w_picpath: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));background-p_w_picpath: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-p_w_picpath: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-p_w_picpath: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}.checkered{background-p_w_picpath: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));background-p_w_picpath: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%);background-p_w_picpath: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%);background-p_w_picpath: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);}.picnic{background-color:white;background-p_w_picpath: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));background-p_w_picpath: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));background-p_w_picpath: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));background-p_w_picpath: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));}#footer{text-align: center;clear: both;padding-top: .5em;border-top: 1px solid #ccc;font-variant: small-caps;}
</style> ? ?
</head>
<body>
<h1>Stripes & other patterns with CSS3 — no p_w_picpaths</h1>
? ?<div class="horizontal stripes"></div>
? ?<div class="vertical stripes"></div>
? ?<div class="picnic stripes"></div>
? ?<div class="angled stripes"></div>
? ?<div class="angled-135 stripes"></div>
? ?<div class="checkered stripes"></div>
<br>
<p><a href="http://www.webdm.cn">網(wǎng)頁代碼站</a> - 最專業(yè)的網(wǎng)頁代碼下載網(wǎng)站 - 致力為中國站長提供有質(zhì)量的網(wǎng)頁代碼！</p>
</body>
</html>
轉載于:https://blog.51cto.com/sanye/1337765
總結
以上是生活随笔為你收集整理的CSS3实现各种纹理背景效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【搞事情】利用PyQt为目标检测SSD3
- 下一篇： 我们的最后：在CSS中使用last-ch