CSS新增的背景属性

最新推荐文章于 2023-09-06 07:21:02 发布

GK-c

最新推荐文章于 2023-09-06 07:21:02 发布

阅读量466

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： CSS3.0 css新增的背景属性

本文链接：https://blog.youkuaiyun.com/chengjinrui/article/details/53727408

前端开发专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了CSS中背景属性的各种用法，包括背景颜色、背景图片、背景重复方式、背景定位等，并深入探讨了线性渐变和径向渐变的效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css新增的背景属性
   background-color
   background-image：
   background-repeat:
   background-position：
   background-image:linear-gradient(to top,green,red,yellow,orange);:线性渐变
       （方向或角度可以用left或者0 edge，颜色1 20% ，颜色2 80%）
       方向：left 、right、 top、 bottom
           left top、right top、left bottom、 right bottom
       (to top,green,red 50%);渐变色占50% 剩下的是50%的red
       （to top，green 100px,red 20px）; 100px是绿色然后是渐变色然后是20px的红色
   background-img：repeat-linear-gradient（to top，green，red 20%）背景用渐变效果
   background-img：radial-gradient(green,red) 径向渐变
   background-size：length|percentage|cover|contain；
   长度
   百分比
   拉伸
   平铺
   background-size：20px 100px；水平和纵向的px值
   background-size：100% 20%；水平和纵向的百分值 px和百分百都可以只写一个值表示水平和纵向是相同的变化
   background:url(),url(),url();
   background-clip:border-box/padding-box/content-box;
   background-origin:padding-box/border-box/content-box; 默认值是padding 是从padding起始位置开始的

       background:url();
       padding:20px;
       border:10px dashed red;
       background-clip：padding-box；
       background-orign：padding-box、border-box、congtent-box
   resize：none；
   outline:1px solid red;       outline:none;
   div默认是不能变大变小的设置resize：both;就可以变大变小了？


background-image：repeat-linear-gradient() 后面的这个linear东西要是要用-webkit 那个to top必须写成top了不能加to
-webkit-background-clip;text;
-webkit-text-fill-color:transparent;