关于background复合写法

最新推荐文章于 2024-01-12 13:54:26 发布
最新推荐文章于 2024-01-12 13:54:26 发布
阅读量4.8k 收藏 4
点赞数 6
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roadloser/article/details/88977912
版权

常用的复合样式写法

1. ~image ~repeat ~attachment ~position/~size
2. ~image ~repeat ~attachment ~position
3. ~image ~repeat ~position/~size

例子：直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>roadloser</title>
  <style>
    body{
    background: url(images/luchi.jpg) no-repeat scroll top/cover;
  }
  </style>
</head>
<body>

</body>
</html>

结语

刚学前端时，背景复合写法百度了半天都没找到实例，最后自己实践了才知道background-size是在background-position前加“/”，而不是用空格隔开。

roadloser
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background的复合写法：图片、渐变色、纯色
Serena_tz的博客
04-11 261
的复合写法可以使用逗号分隔多个属性值，每个属性值对应不同的背景层。属性，表示不重复平铺图片，使用100% 100%指定了背景图片的位置，使用。函数定义了一个线性渐变背景层，角度为38度，颜色从白色。函数指了一个图片背景层，图片路径为。指定了背景图片的大小。设置了一个纯色背景层。这个写法中，首先使用。
css复合属性的写法
10-01 2758
==========================================================1. 背景－background==========================================================单个属性的写法.sample1 {background-color: #CCCCCC; /*背景颜色*/backgroun...
CSS——background复合写法
月来better
08-04 5155
背景复合写法： background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 注意： background和background-size不能一起连用，否则不生效 案例如下： *{ margin: 0; padding: 0; } html,body,div{ width: 100%; height: 100%; } <div style="background: url('./assets/images/13.jpg') 100% 100%.
【css】background的复合写法
Eagler_Step
06-29 904
background-size 与 background的结合，避免与background-position混淆。 其中，background-position和background-size间需要用 字符′/′\color{red} {字符'/'}字符′/′ 连接。
CSS2day.2(块内元素，行内元素，行内块元素，背景(background的复合写法))
shrimper
05-29 1200
文章目录CSS元素显示模式块元素行内元素行内块元素总结：显示模式的转换： CSS元素显示模式 作用：更好的布局我们的网页 HTML一般分为块元素和行内元素两种类型 比如div独占一行，一行可以放多个span。 块元素 常见块内元素有：h1~h6，p，div，ul，ol，li等。 特点： 独占一行 高，宽，外边距和内边距都可以控制 宽度默认是容器（父级宽度）的100% 可看做是一个容器（盒子），里面可以放行内或者块级元素 以下注意： 文字类的元素内不能使用块级元素 <p>
background复合写法顺序
weixin_50367873的博客
02-28 3035
background: #000 url(../images/logo.png) no-repeat left center / cover; 参数说明 background-color 背景色 background-image 背景图 background-repeat 是否重复显示 background-position / background-size 背景图片位置 / 背景图片大小 注意：background-size是CSS3的属性 它要与background-position配合使用，中间有
JS backgroundImage控制
12-01
代码如下:function changeBgImage(obj){ obj.style.cssText=”background:url(‘2.gif’) no-repeat 2 3″; }
background
10-14
在IT行业中，"background"一词常常用于指代软件、应用程序或系统运行时的环境，也可以是用户界面设计的一部分，即背景元素。这里的标题和描述简单地提到了"background"，意味着我们将关注与简易操作和新手友好的背景...
background-size使用详解
09-25
主要介绍了background-size使用详解,需要的朋友可以参考下
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要...对于更深入的理解，可以参考W3C规范以及关于像素和浏览器视口的文章，以便更好地处理页面布局和交互。
background 组合写法_css中background复合属性详解
weixin_42303282的博客
01-31 4654
==========================================================单个属性的写法.sample1 {/*背景颜色*/background-image: url(sample.gif); /*背景图片*/background-repeat: no-repeat; /*平铺(?)*/background-attachment: fixed; /*随文本...
CSS：background 复合属性详解（用法 + 例子 + 效果）
Cosmoshhhyyy的博客
08-10 2810
本文详细介绍background的用法，例如：background-color 背景颜色（纯）、backgroundimage 背景图片 或者 渐变颜色、background-repeat 背景是否重复、background-size 设置图片大小、background-position 设置背景图片显示位置、background-attachment 设置背景图片是否随页面滚动。
background复合属性样式及顺序
最新发布
wonderfulgood的博客
01-12 757
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角。
background的复合属性用法
月来better
10-14 2132
<div id="imgCon"></div> #imgCon{ width: 200px; height: 200px; border: solid 1px #0000FF; background:cyan url("./img/person.jpg") 10px 50%/90% 62% no-repeat ; }
background属性写与合写问题
m0_53438035的博客
04-19 448
css中如果要用background，建议所有属性写在一起。因为background的默认值可能会覆盖你所需要的值。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
background复写写法
weixin_34143774的博客
10-26 423
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS入门之背景样式实例，背景图滚动:background-attachment,background复合样式
u011333814的专栏
01-28 1256
背景图滚动分两种： 1.background-attachment:scroll 表示图片随着滚动条滚动 列表实例 i love you i love you very much do you love me if you love me please tell me i love you i love you very much do you love me i
【CSS】css的background属性用法详解，background常用缩写形式
余浩的博客
06-24 3738
//指定背景颜色 //设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;//设置背景图像的位置//设置背景图像的大小 //指定背景图像的铺排方式//设置背景图像显示的原点[background-position相对定位的原点];//设置背景图像向外剪裁的区域;//指定背景图像是滚动还是固定; 默认滚动；...
background的复合写法
08-24
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、付费专栏及课程。

余额充值