英文:
It is possible to size two Backgroud image in one element?
问题
我想调整背景图像的位置。这是可能的吗？
我已经尝试过，但实际上它不起作用。
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%;
}
英文:
I want to size the background images places on their position. It is possible?
I've tried but it's not working actually.
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%;
}
答案1
得分: 1
请尝试像这样，希望会起作用。
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%;
}
英文:
Please try like this, hope it will work.
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%;
}
答案2
得分: 1
是的，这是可能的，你可以在这里找到详细信息：
https://www.w3schools.com/css/css3_backgrounds.asp
你还可以查看这个示例：
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>
英文:
Yes it's possible, you will get the details here.
https://www.w3schools.com/css/css3_backgrounds.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
You can see this pen also
https://codepen.io/salmanaabir/pen/zYLQwXE
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论