我想调整其位置上的背景图像的大小。有可能的? 我已经尝试过,但实际上不起作用。
header {
background: #fff8f3;
padding: 0 200px;
background-image: url('../images/header_bg.png'), url('../images/developer.png');
background-repeat: no-repeat;
background-position: bottom right, left;
background-size: 50%;
}
请尝试这样,希望它会起作用。
header {
background: #fff8f3;
padding: 0 200px;
background-image: url('../images/header_bg.png') bottom right no-repeat, url('../images/developer.png') left no-repeat;
background-size: 50%, 50%;
}
是的,有可能,您将在此处获得详细信息。
https://www.w3schools.com/css/css3_backgrounds.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
您还可以看到这支笔 https://codepen.io/salmanaabir/pen/zYLQwXE
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(https://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(https://www.w3schools.com/css/paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>