background的复合写法:图片、渐变色、纯色

background的复合写法可以使用逗号分隔多个属性值,每个属性值对应不同的背景层。对于将背景设置为图片、渐变色和纯色叠加在一起的情况,可以使用以下写法:

background: url(../../../img/huayin/newsBg@2x.png) no-repeat 100% 100%/54px 50px, linear-gradient(38deg, #FFFFFF 0%, #F3F4FF 100%), #fff;

这个写法中,首先使用url()函数指了一个图片背景层,图片路径为…/…/…/img/huayin/newsBg@2x.png,且设置了no-repeat属性,表示不重复平铺图片,使用100% 100%指定了背景图片的位置,使用54px 50px指定了背景图片的大小。然后使用linear-gradient()函数定义了一个线性渐变背景层,角度为38度,颜色从白色(#FFFFFF)渐变到淡紫色(#F3F4FF)。最后使用#fff设置了一个纯色背景层。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
background复合写法是通过使用background属性来同时设置背景颜色、背景图片、平铺方式、滚动方式和位置等。具体的语法格式为background: 颜色 图片地址 平铺方式 滚动方式 位置。其中,颜色可以是具体的颜色值,也可以是rgba格式的半透明颜色值;图片地址指的是背景图片的URL地址;平铺方式可以是repeat(重复平铺)、repeat-x(水平方向重复平铺)、repeat-y(垂直方向重复平铺)或no-repeat(不平铺);滚动方式可以是scroll(滚动)或fixed(固定);位置可以是具体的像素值或百分比值。 例如,下面的代码是一个示例,背景使用了一张图片,并设置了图片在容器中水平垂直居中,不进行重复平铺,并且背景颜色为半透明效果: ``` <div style="background: url('./assets/images/13.jpg') 100% 100% no-repeat;background-size: cover; background-color: rgba(0,0,0,0.3);"></div> ``` 这样设置之后,背景图片会按照容器的尺寸进行缩放,完全覆盖容器,并且背景颜色为半透明效果,而容器中的内容不会受到影响。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt](https://download.csdn.net/download/weixin_45636552/12674201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [CSS——background复合写法](https://blog.csdn.net/Kiruthika/article/details/119394991)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [css复合属性的写法](https://blog.csdn.net/dduvk21111/article/details/101226234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值