CSS插入背景图片并且充满整个容器

先上图，需要实现下面这种样式

引入背景图

  height: 36px;background: url('~static/assets/img/warn_border.svg') no-repeat;background-size: 100% 100%;

发现并没有被撑开

解决：

 background-size: cover;

或者

 background-size: auto 100%;

下面介绍background-size使用语法

length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

background-size: 100px 80px; // 背景图片宽为100px，高为80px

percentage: 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

background-size：60%  80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

CSS插入背景图片并且充满整个容器相关推荐

html背景图片css怎么添加,css样式怎么插入背景图片？
css样式怎么插入背景图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,给html元素添加背景图,主要通过background-image ...
为什么在css里使用background-image插入背景图片时，浏览器没有任何反应
在今天写页面的时候遇到一个这样的问题,不知道有没有跟我一样遇到过这样类似的问题"在css里使用background-image插入背景图片时,浏览器没有任何反应"并且css引用语法 ...
php背景图片平铺拉伸,利用jQuery和CSS将背景图片拉伸
现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一张大背景图进行拉伸效果呢?也就是说使用一张固定尺寸的背景图片,让它在页面中随着浏览器尺寸进行拉伸,就像我们的电脑桌面壁纸效果.本文将带您一起 ...
CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
css怎么分开背景图片,css切背景图片（background-position）
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
html5背景图片能加链接,CSS中用背景图片做为超链接的方法
Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprit ...
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一.DIV中添加背景图片二.img中设置背景图片三.Body中设置背景图片结语针对页面背景图片我整理了几种 ...
CSS 背景色背景图片渐变背景 - 径向渐变 background-image:radial-gradient()
radial-gradient() 用来生成径向渐变的图片基础语法 background-image: radial-gradient(shape extent at positionX posit ...
html背景图总是在字的下面,怎么我在excel表格里插入背景图片后图片不是显示在文字下面而跑到文字右边的...
怎么我在excel表格里插入背景图片后图片不是显示在文字下面而跑到文字右边的以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧 ...

CSS插入背景图片并且充满整个容器

CSS插入背景图片并且充满整个容器相关推荐

最新文章

热门文章