html背景图片和背景渐变怎么设置_html图片渐变效果「建议收藏」

线性渐变

• 盒子的background-image属性可以用linear-gradient()
  形式创建线性渐变背景
  background-image: linear-gradient(to right, blue, red);
• 渐变方向也可以写成度数
  background-image: linear-gradient(45deg, blue, red);
• 可以有多个颜色值，并且可以用百分数定义它们出现的位置
  linear-gradient(to bottom, blue, yellow 20%, red);

浏览器私有前缀

• 不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识

径向渐变

• 盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景
  background-image:radial-gradient(50% 50%, red, blue);

background-repeat属性

background-repeat属性用来设置背景的重复模式

background-size属性

• background-size属性用来设置背景图片的尺寸，兼容到IE9
  background-size: 100px 200px;
• 值也可以用百分数来设置，表示为盒子宽、高的百分之多少
• 需要等比例设置的值，写auto

contain和cover

• contain和cover是两个特殊的background-size的值
• contain表示将背景图片智能改变尺寸以容纳到盒子里
• cover表示将背景图片智能改变尺寸以撑满盒子

background-clip属性

background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。

background-attachment属性

• background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

background-position属性

• background-position属性可以设置背景图片出现在盒子的什么位置
  background-position: 100px 200px;
• 可以用top、bottom、center、left、right描述图片出现的位置

CSS精灵

• CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个
• CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦

background综合属性

• 一些常用的背景相关小属性，可以合写到一条background属性中
  background: white url(images/archer.png) no-repeat center center;

今天的文章html背景图片和背景渐变怎么设置_html图片渐变效果「建议收藏」分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。