css 如何让背景图片拉伸填充避免重复显示
CSS 如何 显示 重复 避免 填充 背景图片 拉伸
2023-09-14 08:58:29 时间
如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:
1.是一整张大图,尺寸和区域大小刚好吻合
2.一个很小的条状图,通过repeat后,形成一个很规则的大图背景。
但是css3出现以后,这个情况被改善了。background-size 属性可以让我们之前的希望成真。
而且这个属性在firefox,chrome,以及ie9上都可以使用。
具体使用方法如下:
背景图尺寸(数值表示方式):
#background-size{
background-size:200px 100px;
}
背景图尺寸(百分比表示方式):
#background-size2{
background-size:30% 60%;
}
背景图尺寸(等比扩展图片来填满元素,即cover值):
#background-size3{
background-size:cover;
}
背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):
#background-size4{
background-size:contain;
}
背景图尺寸(以图片自身大小来填充元素,即auto值):
#background-size5{
background-size:auto;
}
相关文章
- CSS学习(二):背景图片如何定位?
- 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画
- 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader
- JS+CSS - table 表格固定表头和第一列、内容可滚动 (转载)
- css如何去掉select原始样式
- css 文本超出2行就隐藏并且显示省略号
- 前端学习 -- Css -- 文档流
- [CSS] No selectable effect
- css 如何绘制正方形
- [CSS] Purgecss to remove unused css
- [CSS 3] Create Custom Keyboard Accessible Checkboxes
- [CSS] Resest CSS
- [HTML/CSS]说说position
- CSS 选择器
- SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版
- SAP Spartacus如何禁止某些标准的css样式
- SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格
- css边框,禁止点击事件
- 〖大前端 - 基础入门三大核心之CSS篇⑪〗- 认识盒模型
- css 条形百分比
- 【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )
- 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
- SpringBoot2.x|Thymeleaf页面不能正常载入css、js文件
- CSS预处理器—Sass、LESS和Stylus
- 如何从零开始学习DIV+CSS
- HTML CSS表格如何控制上下间距
- html+css照片墙
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05