广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > Python >CSS3实现各种纹理背景效果
  • 169

0
分享到

CSS3实现各种纹理背景效果

纹理背景效果 2023-01-31 01:01:57 169人浏览 泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

<!DOCTYPE html><head><title>css3实现各种纹理背景效果_网页代码站(www.WEBdm.cn)</title><style>body{font-fam

<!DOCTYPE html>
<head>
<title>css3实现各种纹理背景效果_网页代码站(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">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>

您可能感兴趣的文档:
点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS3实现各种纹理背景效果

本文链接: https://www.lsjlt.com/news/183716.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • CSS3实现各种纹理背景效果
    <!DOCTYPE html><head><title>CSS3实现各种纹理背景效果_网页代码站(www.webdm.cn)</title><style>body{font-fam...
    99+
    2023-01-31
    纹理 背景 效果
  • CSS背景处理：创建各种背景样式和效果
    CSS背景处理：创建各种背景样式和效果，需要具体代码示例导语：在网页设计中，背景样式和效果是非常重要的元素之一。通过使用CSS，我们可以创建多种各样的背景效果，从而使网页更加丰富、美观。本文将为大家分享一些常见的CSS背景处理技巧，并提供具...
    99+
    2023-11-18
    背景样式 (个字) CSS处理 (个字) 效果 (个字)
  • css3如实现边框、背景、文本效果
    这篇文章主要介绍css3如实现边框、背景、文本效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、边框box-shadowbox-shadow: h-shadow v-shadow b...
    99+
    2023-06-08
  • CSS3怎么实现多背景展示效果
    本篇内容介绍了“CSS3怎么实现多背景展示效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下:&l...
    99+
    2022-10-19
  • CSS3中怎么实现模糊背景效果
    这篇文章主要介绍了CSS3中怎么实现模糊背景效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css的选择器有哪些css的选择器可以分为三大类，即id选择器、class选择器...
    99+
    2023-06-14
  • CSS3如何实现磨砂玻璃背景效果
    这篇文章主要为大家展示了“CSS3如何实现磨砂玻璃背景效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3如何实现磨砂玻璃背景效果”这篇文章吧。效果图及实...
    99+
    2022-10-19
  • CSS网页背景图设计：创建各种背景图样式和效果
    CSS网页背景图设计：创建各种背景图样式和效果，需要具体代码示例摘要：在网页设计中，背景图是一种重要的视觉元素，它可以有效地增强页面的吸引力和可读性。本文将介绍一些常见的CSS背景图设计样式和效果，并提供相应的代码示例。读者可以根据自己的需...
    99+
    2023-11-18
    CSS 样式 网页背景图
  • Android Button修改背景颜色及实现Button水波纹效果
    Android Button修改背景颜色及实现Button水波纹效果，效果如下：   以下基于API33（Android13.0），向下兼容至API24（Android7.0）。 1.修改Button背景 我们可以发现在布局xml文件中...
    99+
    2023-09-12
    android
  • 如何使用css3实现各种图标效果
    这篇文章主要为大家展示了如何使用css3实现各种图标效果，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“如何使用css3实现各种图标效果”这篇文章吧。公共样式应该说...
    99+
    2022-10-19
  • CSS/CSS3如何实现文本纹理叠加效果
    这篇文章主要为大家展示了“CSS/CSS3如何实现文本纹理叠加效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS/CSS3如何实现文本纹理叠加效果”这篇文...
    99+
    2022-10-19
  • css3如何实现小箭头各种图形效果
    这篇文章给大家分享的是有关css3如何实现小箭头各种图形效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了#...
    99+
    2023-06-08
  • CSS如何实现背景效果
    这篇文章主要介绍了CSS如何实现背景效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。数量级对背景图形的影响本文的主角主要是：多重径向渐变(repeating-radial-...
    99+
    2023-06-14
  • iOS实现背景滑动效果
    本文实例为大家分享了iOS实现背景滑动效果的具体代码，供大家参考，具体内容如下 1、在很多APP中，我们都可以看见那些特效绚丽的滑动选项条，那么如何才能够简单，快速的实现那样的效果呢...
    99+
    2022-11-13
  • css3+javascript按钮水波纹效果怎么实现
    小编给大家分享一下css3+javascript按钮水波纹效果怎么实现，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！css3+js实现按钮水纹涟漪效果HTML首先我们用<a>标签定义两个按钮<a ...
    99+
    2023-06-14
  • CSS3怎么实现多背景模拟动态边框的效果
    这篇文章给大家分享的是有关CSS3怎么实现多背景模拟动态边框的效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。首先来看看要实现的效果图实现方法如下我首先想到的是border属性...
    99+
    2022-10-19
  • 使用css3怎么实现一个背景动态渐变效果
    使用css3怎么实现一个背景动态渐变效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计...
    99+
    2023-06-08
  • JavaScript实现换肤效果(换背景)
    本文实例为大家分享了JavaScript实现换肤效果的具体代码，供大家参考，具体内容如下 换肤效果：点击不同图片，更换相应页面背景 实现思路 1、定义一组图片，每个src属性赋值背景...
    99+
    2022-11-12
  • iOS如何实现背景滑动效果
    这篇文章主要介绍了iOS如何实现背景滑动效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体内容如下第一步、在很多APP中，我们都可以看见那些特效绚丽的滑动选项条，那么如何...
    99+
    2023-06-29
  • ppt怎么设置动态背景让背景实现动态效果
    在PPT中设置动态背景实现动态效果，可以通过以下方法进行操作：1. 在PPT中选择“设计”选项卡，然后点击“背景样式”下的“格式背景...
    99+
    2023-09-20
    ppt
  • CSS3点击按钮实现背景渐变动画效果的示例分析
    这篇文章主要介绍了CSS3点击按钮实现背景渐变动画效果的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图如下：实例代码如下：&l...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作