CSS之Background-size:cover

background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真

background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像

一般和如下语法连用

background-image: url(../images/1.png);
background-position-x: center;
background-position-y: center;
background-size: cover;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: fixed;

或者这样

background: url("../images/1.png") no-repeat center fixed;

CSS之Background-size:cover相关推荐

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客.大到整个网站的主题背景,小到一个按钮的背景.CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景. ...
纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片
之前写过一篇:CSS中background属性总结整理了background 的常用属性. 日常项目中经常会用到全屏的图片, .png 和 .jpg 的图片都太大,加载缓慢. 我们可以使用webP格式 ...
html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
CSS中background与background-image的区别
CSS中background与background-image的区别 1.如果只是设置两张背景图不涉及CSS样式那么两者都可以使用 2.如果设置样式那就只能用background,如以下是不适用ba ...

CSS之Background-size:cover

CSS之Background-size:cover相关推荐

最新文章

热门文章