给HTML中的块元素设置背景图片

css中关于块元素的背景有 background 属性。

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置

想要给块元素设置背景图片时，就用background-image属性，它的值是url(图片路径)
当图片比块元素小时，可以用background-repeat属性，
值选项：

值	效果
repeat-x	在水平方向上显示多个图片
repeat-y	在竖直方向上显示多个
no-repeat	不重复，只显示一个
repeat	默认。背景图像将在垂直方向和水平方向重复。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

还可以用background-position决定图片放在块元素的哪个位置。
background-position的值用两个百分数显示，第一个代表水平方向上的位置，第二个代表竖直方向上的位置。

例如：50% 50% 就代表图片的右上角在块元素的正中心。

给HTML中的块元素设置背景图片相关推荐

element ui背景图_vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径是不能显示图片的. 也不能直接background...,就是说不通过 ...
vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径是不能显示图片的. 也不能直接background...,就是说不通过 ...
vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...
用vue-cli3脚手架新建的项目,在使用less设置背景图片的时候遇到了路径报错问题,该如何正确设置背景图片的路径? 项目目录如下: 现在在css文件中有一个全局样式common.less.使用的是 ...
Android中遇到button按钮设置背景图片无法显示的解决方案
给button设置了background的属性却显示不出来 1.在图片导入时选错位置,应该选择第一个位置,如果选了第二个图片后面会有(v24)[如下图]就有可能加载不出来. 新版引入drawable ...
php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层？
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
Visual Studio中如何设置背景图片，壁纸
学习编程是一个漫长的过程,设置一个自己喜欢的背景图片,可以给我们的学习过程添加一些乐趣. 下面是效果图目录 1.在扩展中下载ClaudialDE 2.设置背景图片 3.隐藏窗口 3.或使窗口透明 4 ...
VUECSS——最简单的为元素添加背景图片，并自适应div的大小
为一个高宽固定的块元素添加背景图片在样式表中添加背景图片的src, background-image: url('../../assets/images/top_bg1.png') ; 通常还需要 ...
html自动切换body背景,html中怎么用body元素设置背景颜色
html中怎么用body元素设置背景颜色发布时间:2020-06-22 15:17:45 来源:亿速云阅读:137 作者:Leah 这篇文章运用简单易懂的例子给大家介绍html中怎么用body元素 ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...

给HTML中的块元素设置背景图片

给HTML中的块元素设置背景图片相关推荐

最新文章

热门文章