数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 CSS 中，使用哪个属性来设置元素的背景图片？
在 CSS 中，'background-image' 属性用于使用 CSS 设置元素的背景图片。'background-image' 属性接受 4 个不同的属性值，如下所述。
Url () − 它接受图片路径或远程 URL，从特定位置获取图片并将其设置为背景。
None − 用户可以使用 none 作为 'background-image' 属性的值来移除背景。
Initial − 它设置初始背景，在大多数情况下为 none。
Inherit − 它设置与父元素相同的背景图片。
语法
用户可以按照以下语法在 css 中使用 'background-image' 属性。
background-image: url('URL');
background-image: inherit;
background-image: initial;
background-image: none;
如上述语法所示，我们可以使用不同的值来设置背景图片。
示例 1
在下面的示例中，我们创建了 HTML div 元素，并使用 CSS 设置了高度和宽度。此外，我们使用了 'background-image' CSS 属性来将背景设置为 div 元素。
在输出中，用户可以观察到，如果 div 元素的尺寸大于图片，则会重复设置背景图片。
<html>
<head>
<style>
.div-ele {
background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210922/pngtree-abstract-nature-green-and-sunny-defocused-light-background-image_906725.png');
height: 400px;
width: 500px;
font-size: 3rem;
color: black;
}
</style>
</head>
<body>
<h2>Setting up the background image using the <i> background-image </i> property</h2>
<div class = "div-ele">
This is a div.
This is a div.
This is a div.
This is a div.
</div>
</body>
</html >
示例 2
在下面的示例中，我们使用 'initial' 作为背景图片值。在输出中，用户可以观察到它没有为 div 元素设置任何背景，因为初始背景为 none。
<html>
<head>
<style>
.div-ele {
background-image: initial;
height: 300px;
width: 500px;
font-size: 2rem;
color: black;
border: 2px yellow solid;
}
</style>
</head>
<body>
<h3>Setting up the background image using the <i> background-image </i> property.</h3>
<div class = "div-ele"> Hi users, how are you? </div>
</body>
</html>
示例 3
在下面的示例中，我们一起设置了渐变和图片作为背景。在输出中，用户可以观察到渐变是从上到下，并且 div 元素的内容位于渐变之上。
<html>
<head>
<style>
.div-ele {
background-image: linear-gradient(rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6)), url('https://tutorialspoint.com/css/images/css-mini-logo.jpg');
height: 300px;
width: 500px;
font-size: 4rem;
color: black;
border: 2px yellow solid;
}
</style>
</head>
<body>
<h2>Setting up the background image using the <i> background-image </i> property.</h2>
<div class = "div-ele">
Welcome to TutorialPoint's website!
</div>
</body>
</html>
示例 4
在下面的示例中，我们设置了两个图片作为 div 元素的背景。此外，我们还为这两个元素设置了不同的背景位置。在输出中，用户可以观察到一个图片位于右下角，另一个位于左上角。
每当我们一起使用两个背景图片时，第一个图片会显示在第二个图片的上面。
<html>
<head>
<style>
div {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmvLkYgy28lI-iZWZpd3aAz0mi25dpUNXnU6OUE2V&s"), url("https://media.istockphoto.com/id/1090883040/vector/twinkle-little-star.jpg?s=612x612&w=0&k=20&c=Z5csKM3_ccD2MWqeWn6XfBoCqUeGf1IJHN09hJhCQEM=");
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 500px;
width: 500px;
font-size: 2rem;
color: white;
}
</style>
</head>
<body>
<h2>Setting up the multiple background images using the <i> background-image </i> property.</h2>
<div>
This div contains 2 background images.
The first one is at the right bottom, and the second one is at the left top position.
</div>
</body>
</html>
在本教程中，用户学习了如何使用 'background-image' 属性来设置图片的背景。用户还学习了如何将渐变设置为 HTML 元素的背景。用户还可以使用多个图片作为背景，并且随着他们添加图片的 URL 作为值，背景图片也会按相同的顺序出现，从而创建一个堆栈。
421 次浏览
