css 中的background-image、color、position、attachment、size、repeat

已于 2023-03-22 17:44:12 修改
阅读量79 收藏
点赞数
分类专栏： css 前端 文章标签： html css3 前端
于 2021-05-30 23:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjw_zyfx/article/details/117407189
版权
前端 同时被 2 个专栏收录
296 篇文章 0 订阅
订阅专栏
css
71 篇文章 0 订阅
订阅专栏

# 再补充一个 background-size 

 例如：注意 background-size 设置的属性要和前边有一个 / 隔开，否则会语法报错

background: url(./assets/images/load.gif) no-repeat left center / contain;

jjw_zyfx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS背景background、background-position使用详解
09-25
主要的背景属性包括`background-color`、`background-image`、`background-position`、`background-repeat`和`background-attachment`，这些属性可以通过合并使用缩写属性`background`来一次性设定。 1. **背景颜色...
利用css的background-image和background-position将多图放在一张图片上取用
壁立千仞无欲则刚的博客
07-01 4974
将很多图标放在一张图片上，既方便管理，又不会出现有的图标加载比较慢，有的图标加载不到等情况。 1、html代码里面，比如要把图标放在一个span里，这样写： 2、然后将在css里这样写： .icon-class { background-image:url("Images/icon.png"); bac
背景 background
weixin_46376652的博客
03-02 122
background-attachment: fixed;scroll;background-origin: content-box;padding-box;background-origin: border-box;background-clip: content-box;background-size: cover; contain; background-size: 400px 400px;repeat-x;repeat-y;no-repeat;repeat;image;color
简述CSS中的背景属性background
12-10
本文将深入探讨CSS中的背景属性，主要包括`background-color`、`background-image`、`background-repeat`、`background-size`以及`background-attachment`。 首先，`background-color`属性用于设置元素的背景颜色。...
CSS-Background-Generator:https
04-07
- `background-repeat`: 控制背景图像是否及如何重复，如`no-repeat`、`repeat-x`、`repeat-y`。 - `background-position`: 定义背景图像的位置，如`center`、`top left`等。 - `background-size`: 控制背景图像...
background和background-Color的区别介绍
12-10
在CSS（层叠样式表）中，`background`和`background-color`是两个非常重要的属性，它们用于控制元素的背景效果。理解它们的区别对于精确地调整网页或应用程序的视觉样式至关重要。 `background-color`属性是专门...
fixed-background-effect
06-16
除了`background-attachment`，CSS还有其他背景相关的属性，如`background-color`（背景颜色）、`background-image`（背景图像）、`background-repeat`（是否重复图像）、`background-position`（图像位置）和`...
flex布局中的自动占满剩下的内容
热门推荐
jjw_zyfx的博客
10-29 2万+
没点击的时候 点击完后的样子： 代码： <template> <div class="app"> <div class="box" > <div class="box1" :style="{height : isTrue ? '200px':'auto'}" @click=...
div 多行盒子均匀分布的两种方式
jjw_zyfx的博客
09-30 7083
第一种： 样式： .box{ background-color: yellow; width: 350px; height: 100px; display: flex; flex-flow: row wrap; /*align-items: center;*/ /*justify-content: space-between;*...
css /deep/、 v-deep、:deep这三个效果一样的用法
jjw_zyfx的博客
10-09 6151
基本意思就是，一个组件会被多个地方使用，但是有些地方可能需要的样式不太一样，比如一个地方需要红色背景，而另外一个地方可能需要蓝色背景，假设第一个地方已经是红色背景了，我想在第二个地方用时改成蓝色，这是如果直接通过全局修改样式则会影响到第一个的背景样式，但是我的本意并不是修改第一个地方的，而是只修改第二个地方的，这个时候就可以在第二个用到样式的前边添加上一个/deep/ 第一个的跟样式{} 在对象中...
Vant 中的遮罩(van-overlay)不占满整个屏幕的用法
jjw_zyfx的博客
06-14 6111
效果如下： 代码如下： <template> <div class="wrapHeader"> <div class="buttonClick" @click="showMask">显示</div> <van-overlay :show="show" @click="show = false"> <ul class="ulLi"> <li&g..
css scale 缩放文字 font-size不起效后使用
jjw_zyfx的博客
09-30 5890
缩放后的效果：
iview 中 $Modal.confirm 居中显示的方法
jjw_zyfx的博客
10-26 3667
.ivu-modal{ position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; } 但是你会发现有闪动的效果，所以说iview真是lj ...
修改vant中的CheckBox边框的颜色和对号的颜色
jjw_zyfx的博客
06-14 3396
<van-checkbox v-model="checked" class="check-box-info" shape="square" checked-color="#FFDA99" icon-size="12px"> <div class="agreement"> &nbsp;&nbsp;&nbsp;我已阅读并同意<span class="under-line" @click.stop="agreement(0...
vue 中点击激活样式的一种方法
jjw_zyfx的博客
10-04 3067
通过click事件来修改currentIndex的值，这样一来class绑定的对应的样式就会自己判断样式 组件间激活的方法： 父组件传递参数： 代码： <tab-bar-item path="/home" activeColor="pink"> <img slot="item-icon" src="~assets/img/tabbar/home.svg" ...
postcss-pxtorem 参数之selectorBlackList、exclude的用法
最新发布
jjw_zyfx的博客
04-03 2787
postcss-pxtorem 参数之selectorBlackList、exclude的用法
图片和文字中间有空隙的解决方法
jjw_zyfx的博客
10-05 2629
图片和文字中间有空隙 解决方法：
input 下拉框
jjw_zyfx的博客
09-30 2123
样式： 代码： .box{ background-color: yellow; width: 350px; height: 30px; position: relative; } .inputTag{ margin-left: 50px; width: 350px; height: 30px; /* 如果不设置 box...
flex 布局中的margin和padding
jjw_zyfx的博客
05-22 2067
css的background-attachment的属性及演示
04-03
background-attachment属性指定背景图像是否固定或随着页面滚动而移动。它有以下几个值： 1. scroll（默认值）：背景图像随着页面滚动而移动。 2. fixed：背景图像固定不动，不随着页面滚动而移动。 3. local：背景图像相对于元素内容固定，不随着页面滚动而移动。 以下是演示： ```html <!DOCTYPE html> <html> <head> <title>Background Attachment Demo</title> <style type="text/css"> body { height: 2000px; } .bg-scroll { background-image: url('https://picsum.photos/1200/800'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: scroll; } .bg-fixed { background-image: url('https://picsum.photos/1200/800'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .bg-local { background-image: url('https://picsum.photos/1200/800'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: local; height: 500px; overflow: scroll; } .content { padding: 50px; color: #fff; text-align: center; font-size: 2em; } </style> </head> <body> <div class="bg-scroll"> <div class="content"> Scroll Background </div> </div> <div class="bg-fixed"> <div class="content"> Fixed Background </div> </div> <div class="bg-local"> <div class="content"> Local Background </div> </div> </body> </html> ``` 以上代码将创建三个不同的元素，每个元素都有不同的background-attachment属性。第一个元素的背景图像随着页面滚动而移动，第二个元素的背景图像固定不动，第三个元素的背景图像相对于元素内容固定，只有元素内容区域内可以滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值