• 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))
  • 相关阅读:
    组合数学练习
    floyd算法新理解
    图论练习
    GDOI2021 day2总结
    P3190 [HNOI2007]神奇游乐园
    P1932 A+B A-B A*B A/B A%B Problem
    P2289 [HNOI2004]邮递员
    P5056 【模板】插头dp
    P4323 [JSOI2016]独特的树叶
    CF1153D Serval and Rooted Tree
  • 原文地址:https://www.cnblogs.com/dabingguai/p/4936191.html
Copyright © 2020-2023  润新知