css样式中background复合属性中设置background-size

已于 2022-03-25 17:33:32 修改
阅读量664 收藏
点赞数 1
文章标签： css3
于 2022-03-25 17:32:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/online151/article/details/123740937
版权

background: url("../images/bg1.jpg") repeat-x 10px 30px,

url("../images/bg3.jpg") no-repeat 10px 70px/20% ,

url("../images/bg2.jpg");

苦于不知如何在background的复合属性下设置background-position和background-size，找寻许久才知道 要用/将position/size隔开 所以background: url("a.jpg") no-repeat 10px 70px/20% 意思就是图片a.jpg将以 不平铺、距离父盒子上边缘10px 距离左边缘70px、图片的宽为盒子宽的20%且高度为自适应变化的方式加入到所在的父盒子。

地球online在线中
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【SpringBoot】配置文件的加载与属性值的绑定
石臻臻的杂货铺(szzdzhp001)
09-27 2371
Question 在使用SpringBoot过程中你是否会有以下疑问？ 具体有多少种配置属性源的方式呢？ 为何使用@Value 注解就能够获取到属性源中的值呢？ 属性源这么多,如果属性相同的话 那么用哪个值呢？ 属性源是如何绑定到我们的程序中的呢？ Nacos是如果接入到SpringBoot中的呢？为什么@NacosValue可以获取到Nacos中的值并且还是实时刷新的？ 有没有什么方式可以将SpringBoot中的静态配置全部移动到Nacos中去吗？ 本篇文章会针对以上问题逐个分析 Answer
CSS：background 复合属性详解（用法 + 例子 + 效果）
最新发布
Cosmoshhhyyy的博客
08-10 2811
本文详细介绍background的用法，例如：background-color 背景颜色（纯）、backgroundimage 背景图片 或者 渐变颜色、background-repeat 背景是否重复、background-size 设置图片大小、background-position 设置背景图片显示位置、background-attachment 设置背景图片是否随页面滚动。
css_背景属性踩坑_background-size会被background复合属性覆盖
qq_43260366的博客
08-04 1155
当前有循环li元素；每个li元素代表 抖音、微博、小红书、快手四个媒体中的一个；不同媒体在li元素中右上角logo不同；
background复合属性顺序_CSS 常用复合属性
weixin_39612122的博客
12-21 614
background// background: background-color background-imagebackground-repeat background-attachment background-position/background-size// background: 背景色 图片地址 是否重复 是否固定 定位/图片尺寸background: #fff url(https...
【CSS】将background-size写入background中的语法 size属性不能写入background原因
这道题我不会做...不会做啊..太难了！！
12-31 1210
引言 今天在做样式的时候想在background属性中将所有的背景全部定义完，并不想东一个西一个的写，但是在写background-size这个属性的时候，无论将该属性值写在什么地方都是错误的 语法 background属性的语法为： background:bg-color bg-image position /bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; 没错其中bg-size就是指background-size属
css-background-transition-test：更改背景教程
02-18
在CSS（层叠样式表）中，背景过渡（background transition）是实现动态视觉效果的一种重要技术。本教程将深入探讨如何使用CSS来控制元素背景属性的变化，如颜色、图像、位置等，创建平滑的过渡效果。这不仅能够提升...
background-generator
04-03
"background-generator-main"可能是项目的主要源代码文件夹，包含HTML结构、CSS样式和可能的JavaScript逻辑。 综上所述，"background-generator"项目涉及到的CSS背景知识广泛，涵盖了基本属性、渐变、动画、响应式...
Background-generator
03-30
在背景生成器中，可能需要选择或创建一个元素作为背景，并为其设置样式属性，如`background-image`、`background-color`或`background-size`。 2. **CSS属性**：CSS的`background`属性是一个复合属性，用于设置背景...
HTML5&CSS3网页制作：设置多重背景图像.pptx
06-01
在CSS3中，通过background-im、age等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。 background： background-color background-image background-position background-repeat background-...
background复合属性公式及释义
weixin_57633124的博客
04-13 953
background复合属性公式及释义
background复合属性顺序_background：常用背景属性（复合属性）
weixin_39759060的博客
02-23 1795
定义和用法background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性：background-color | 背景颜色background-position | 背景图片位置background-size | 背景图片大小background-repeat | 背景图片重复填充background-origin | background-po...
关于CSS中background相关知识
u012032178的博客
06-30 545
css中background-image与background-size相关用法
js修改css样式属性_这个笔记《CSS样式的常见属性及值》，让菜鸟轻松学会包粽子...
weixin_39636610的博客
11-29 167
常见样式属性及值字体:font-family-size-style: normal(正常)|italic(倾斜)|oblique-weight: normal|bold(粗体)如果组合起来编写: font: style weight size family字体大小的单位可以是 px, em, rem, pt, cm, mm, in, pc文本:colortext-align(水平对齐方式): le...
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
html5背景大小,HTML5基础加强css样式篇（背景图大小设置：background-size）（三十九）...
weixin_39607447的博客
06-10 251
1圈调直年情，量的单框来离理这接法清都的为.background-si需朋朋支带不新器功几的事上为做的和时意后ze属性：.box {margin: 200px 0 0 200px;width: 200px;height: 200px;background-color: orange;background-image: url("img/img11.jpg");/*设置背景图大小*//*backgr...
background-size 之 背景图的尺寸设置
qq_45288176的博客
06-16 1万+
引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值可以用px设置成具体的值，也可以使用百分比各种不同比例的适配问题，完美适配很少发生背景图1和背景图2 you红色边框分隔开来背景图1背景图2......
Thymeleaf实现行内背景样式，补充行内样式属性
debugtoday的博客
02-18 1944
Thymeleaf实现行内背景样式，补充行内样式属性
html5 background:url 缩放,background-size使用详解
weixin_40007175的博客
06-22 4214
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：background-size: auto | | | cover | contain取值说明：1、auto：默认值，不改变背景图片的原始高度和宽度；2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；3、：0％~100％之间...
css background参数设置问题
张木期的博客
05-29 1万+
背景属性详解 background-repeat background-repeat 属性用来设置背景图像的铺排填充方式, 默认值: repeat 。 取值说明: repeat-x 表示横向上平铺, 相当于设置两个值 repeat no-reapeat; repeat-y 表示纵向上平铺, 相当于设置两个值 no-repeat repeat; repeat 表示横向纵向上均平铺; no-repea...
css样式中background复合属性
06-06
在 CSS 样式中，background 是一个复合属性，它包含了 background-color、background-image、background-repeat、background-position、background-size 等多个简单属性。 下面是这些简单属性的解释： 1. background-color：用于设置背景颜色。 2. background-image：用于设置背景图片。 3. background-repeat：用于设置背景图片的重复方式。 4. background-position：用于设置背景图片的位置。 5. background-size：用于设置背景图片的尺寸。 这些简单属性可以单独设置，也可以组合在一起使用，如下面的例子所示： ``` background: #ff0000 url(bg.jpg) no-repeat center top; ``` 这个样式会将页面元素的背景设置为红色，并使用 bg.jpg 图片作为背景图片，不重复，居中显示在顶部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值