【CSS】将background-size写入background中的语法 size属性不能写入background原因

最新推荐文章于 2023-08-23 17:57:04 发布
最新推荐文章于 2023-08-23 17:57:04 发布
阅读量1.2k 收藏 3
点赞数 3
分类专栏： CSS 文章标签： css css3 background background-size
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43915356/article/details/112055977
版权

引言

今天在做样式的时候想在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属性，他的前面有一个/，所以在使用background综合写背景样式定义background-size属性时，要带一个斜杠
在这里插入图片描述

列队猫
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS-in-JS学习
天涯学馆
05-29 152
CSS-in-JS 是一种编写样式的方法，它允许开发者在JavaScript组件内部定义样式，通常使用类似于CSS的语法。这种方式提高了代码的可复用性和可维护性，因为它将样式与组件逻辑紧密关联。
background-size ,写在background里面，使用右划线
ISaiSai的专栏
11-30 5245
background-size ,写在background里面
css样式中background复合属性中设置background-size
online151的博客
03-25 680
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-
css background属性合在一起写background-size background-positon
jsjxxx的博客
01-16 3893
background：no-repeat scroll 56px 78px / 69px 69px rgba(0, 0, 0, 0); background：no-repeat scroll 56px 78px（background-position）/（分割线） *69px 69px *（background-size ） rgba(0, 0, 0, 0); ...
单独设置background-xxx比如（background-position）失效原因及解决方法
A_pig_like_sleeping的博客
07-20 5592
                如何解决单独设置background-xxx属性失效问题 background属性是一个使用很广泛的属性，所有主要浏览器都支持这一属性，平日里我们也常用background： ＃FF0000 url('../xx.jpg') top left no-repeat;  这一缩写属性的方法。 正文 今天在写一个轮播图背景图的时候碰到这样一个问题：我单独设置了ba...
background简写属性的书写顺序，以及各个属性的含义
最新发布
柑橘乌云_
08-23 2835
是background-color，background-image，background-repeat，background-attachment，background-position,background-size。注意：如果用background-size,一定要用/分隔接下来。
批量输出 CSS background-position 属性的定位像素值
12-01
3. **生成新CSS**：创建一个新的CSS文件，将转换后的`background-position`值写入，替换原有的非像素值。 4. **应用新CSS**：最后，将新生成的CSS应用到项目中，确保所有元素的背景位置都按像素值定位。 在实际操作...
html框架代码背景图片,CSS3中background-image实现多背景图片（代码实例）
weixin_29439509的博客
06-07 1529
本文目标：1、掌握background-image多背景的实现问题：1、实现以下效果，使用纯DIV+CSS，必须使用background-image附加说明：1、整体宽度是1000px，高300px，要求页面居中显示2、背景图片宽，高均为300px3、每张图片都是当做背景图片来呈现的现在来具体操作1、准备素材：根目录创建images文件夹，把相关素材图片都存放与此，素材有2、创建好index.ht...
vue 内联样式style中的background用法说明
11-19
除了`background-image`和`background-color`，`background`属性还包含其他子属性，如`background-repeat`（是否平铺背景）、`background-position`（定位背景图像）和`background-size`（控制背景图片大小）。...
css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜　
07-31
- `background-color`：设置背景颜色。 - `font-size`：设置字体大小。 - `margin`/`padding`：控制元素周围的空间。 - `border`：定义边框样式、宽度和颜色。 - `display`：控制元素的显示方式，如`block`、`...
关于background-size各个参数详解
热门推荐
JED'S BLOG
02-23 1万+
今天公司的要做一个名叫梦幻恋舞的webapp，在设置背景图的时候，明明已经把整个区域的高宽设置成100%了，但是背景图总不能全覆盖整个网页。考虑使用background-size这个属性，在用的时候发现background-size还有好多值，这边特地找一下学习一下。 属性名: background-size 属性值: * 其中 bg-size = [ |
CSS的background背景属性详解
共同进步
05-22 6602
CSS的background背景属性详解 background-color: 背景颜色 - background-image: 背景图片 - background-repeat: 重复背景图片 - background-attachment: 是否固定或者随着页面的其余部分滚动 - background-position: 背景图片的位置 - background-size: 背景的尺寸 - background-origin: 背景图片定位区域 - background-clip: 背景图
【CSS】从一个CSS属性开始说起
繁华落尽
09-03 429
前言 作为一名前端开发者，想必你也经常使用CSS background 属性，那你知道这个属性是哪些属性的简写吗？知道 background-color 背景颜色永远是最低？知道 background 属性设置值有什么注意事项吗？ 带着上面的问题，我们一起揭开 background 神秘的面纱~ Background知多少 background 是一个 CSS 简写属性，用于设置与背景有关的内容。例如：图片，颜色、尺寸等。 它是多个 CSS 属性的集合： background-color: 设置背景颜色
CSS 第005 背景-理论
ml_YSY的博客
11-09 394
背景属性：background CSS 背景属性用于定义HTML元素的背景。 背景缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性分别是： 值 说明 background-color 指定要使用的背景颜色 background-position 指定背景图像的位置 background-size 指定背景图片的大小 background-repeat 指定如何重复背景图像 background-origin 指定背景图像的定位区域 .
【CSS】background各属性一览汇总
ColdCoder的博客
12-20 1万+
前言： 某天上班打开未关机电脑，发现电脑自动打补丁，谷歌浏览器也更新了，但打开项目后发现，设置的背景图竟然未铺满整个div box。原本设置： { background: url('../../xxx.png') no-repeat 100% 100%; } 必须设置： { background: url('../../xxx.png') no-repeat 100%/cover; } 这时才能显示为铺满效果。 经过尝试发现，我电脑更新后的谷歌浏览器，按照背景图比例显示图像，未进行拉
background-size （设置背景图片的大小）
weixin_33912246的博客
10-20 2487
设置背景图片的大小，以长度值或百分比显示（数值包括 长度length和百分比percentage），还可以通过cover和contain来对图片进行伸缩。 语法：background-size: auto | <长度值> | <百分比> | cover | contain bg-size = [ <length&...
CSS-背景大小 | background-size
weixin_34319374的博客
09-13 386
background-sizeCSS属性指定一个元素的背景图像的大小。图像可以保留其自然大小，拉伸到一个新的大小，或约束，以适应可用空间，同时保持其固有的比例。 /* Keyword values */ background-size: cover; background-size: contain; /* One-value sy...
CSS——background复合写法
月来better
08-04 5275
背景复合写法： 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-size设置无效，算踩坑吗？
weixin_36089438的博客
09-27 9499
首先毋庸置疑，当背景是图片的时候可以利用background属性， 写法可以是 background:url(); 或者是background-image:url() 业务中在设置button的背景为图片的时候，因为前面button有样式 background:red ！important 所以在修改背景的时候也要加上了!importan，否则背景样式会设置不成功，仍然保持原...
CSS入门教程：HTML样式设置与颜色语法
1. 内联样式：直接在HTML元素的`style`属性中写入CSS代码，如`;">文本</p>`。 2. 内部样式表：在HTML文档的`<head>`部分使用`<style>`标签包含CSS代码，如： ```html <style type="text/css"> mm {background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

列队猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值