可以在一个元素中调整两个背景图像的大小吗?

问题描述 投票:0回答:2

我想调整其位置上的背景图像的大小。有可能的? 我已经尝试过,但实际上不起作用。

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%;
}
css background-image
2个回答
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%;
}

1
投票

是的,有可能,您将在此处获得详细信息。
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>

© www.soinside.com 2019 - 2024. All rights reserved.