• css3 background-image的使用


    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
    <meta charset="utf-8" />
    <title>background-image_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
    .test strong {
    	font-size: 16px;
    }
    .test .url p {
    	padding-top: 200px;
    	background-image: url(http://css.doyoe.com/properties/background/skin/p_103x196_1.jpg);
    	background-repeat: no-repeat;
    }
    .test .gradient p {
    	height: 100px;
    	background-image: linear-gradient(to top, #45B5DA, #0382AD);
    }
    .test .multiple p {
    	padding-top: 200px;
    	background-image: url(http://css.doyoe.com/properties/background/skin/p_103x196_1.jpg),
    					  url(http://css.doyoe.com/properties/background/skin/p_103x196_1.jpg),
    					  url(http://css.doyoe.com/properties/background/skin/p_103x196_1.jpg);
    	background-repeat: no-repeat;
    	background-position: 0 0,
    						 100px 0,
    						 200px 0;
    }
    </style>
    </head>
    <body>
    <ul class="test">
    	<li class="url">
    		<strong>使用url()引入背景图像</strong>
    		<p>使用url()可以是绝对或相对路径</p>
    	</li>
    	<li class="gradient">
    		<strong>使用渐变绘制背景图像</strong>
    		<p>渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>
    	</li>
    	<li class="multiple">
    		<strong>多重背景图</strong>
    		<p>多重背景图可以是url()或gradient的混合方式</p>
    	</li>
    </ul>
    </body>
    </html>
    			
    

    background-image_CSS参考手册_web前端开发参考手册系列

    • 使用url()引入背景图像

      使用url()可以是绝对或相对路径

    • 使用渐变绘制背景图像

      渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient

    • 多重背景图

      多重背景图可以是url()或gradient的混合方式

    • 渐变的类型? (linear)
    • 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
    • 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
    • 开始的颜色? (from(red))
    • 结束的颜色? (to(blue))
  • 相关阅读:
    Keras -- 词向量 CNN
    KUDU实时分析
    Keras
    Kalfka
    Linux云
    管理KUDU
    列存储与行存储
    算法笔记 第5章 入门篇(3) --数学问题 学习笔记
    算法笔记 上机训练实战指南 第4章 入门篇(2) --算法初步 4.6two pointers 学习笔记
    算法笔记 上机训练实战指南 第4章 入门篇(2) --算法初步 4.4贪心 学习笔记
  • 原文地址:https://www.cnblogs.com/dabingguai/p/4936191.html
Copyright © 2020-2023  润新知