如何显示此背景图片
[英]how to show this background image
问题描述
you can open it using browser, but I cannot display the background image in these code. 
您可以使用浏览器打开它，但是我无法在这些代码中显示背景图像。 what problem it is? 这是什么问题？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg);
width:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative" class="item2" data-aos="fade-up">
</div>
</body>
</html>
6 个解决方案
解决方案1
1 2019-07-25 02:32:57
There two things you need to do: 您需要做两件事：
- Enclose the URL in quotes. 将该网址用引号引起来。
- Add some dimensions to the div. 在div中添加一些尺寸。
In the updated example below I have added a 500x500 dimension to the div 在下面的更新示例中，我向div添加了500x500尺寸
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg'); width:100%; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative; width: 500px; height: 500px" class="item2" data-aos="fade-up"> </div> </body> </html>
解决方案2
0 2019-07-25 02:20:46
try this 尝试这个
<div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg');
width:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative" class="item2" data-aos="fade-up">
解决方案3
0 2019-07-25 02:29:05
You'll need to set a height for the <div> with the background image. 您需要使用背景图像为<div>设置高度。
Edit : Sorry, did not notice the space in the url. 编辑 ：对不起，没有注意到URL中的空格。 Also make sure that when there is a space in the URL path to the image to enclose the url with quotes. 还要确保在图像的URL路径中有空格时，请用引号将URL引起来。
In this case, since the styling is inlined with double quotes " , wrap the url in single quotes ' . 在这种情况下，由于样式用双引号"内联，所以将URL括在单引号' 。
You could try: 您可以尝试：
<div style="background-image:url('https://www.marsha.com.hk/libs/img/Massage-landing 1906x810_R1-03.jpg');
width:100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative" class="item2" data-aos="fade-up">
解决方案4
0 2019-07-25 02:34:07
You need to replace the space with %20 and set the height of the div 您需要将空间替换为%20并设置div的高度
<div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg); width:100%; height: 300px; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative" class="item2" data-aos="fade-up">
解决方案5
0 2019-07-25 02:40:56
- You need to replace the
spacein your image url to%20(for more info see this )您需要替换的space在图像的URL%20（更多信息请参阅本 ） -
%values do not work forwidthandheightbecause there is no other parent div width for it to be assigned to (think as: 100% of what? ).%值不适用于width和height因为没有其他父级div宽度可以分配给它 （想想： 什么是 100％ ？ ）。 So we assign our own (non-percentage)widthandheightproperties to it:因此，我们为其分配了自己的（非百分比） width和height属性：
<div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg); width:100vw; height:100vh; background-position: center; background-repeat: no-repeat; background-size: contain; position: relative" class="item2" data-aos="fade-up"> </div>
解决方案6
0 2019-07-25 04:41:01
In the above, you didn't close the double quotes and also assign some height to the div and check and remove the space provided in the URL link which you have given 在上面，您没有关闭双引号，也没有给div分配一些高度，然后检查并删除URL链接中提供的空格。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-image:url(https://www.marsha.com.hk/libs/img/Massage-landing%201906x810_R1-03.jpg);
width:100vw;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative"
class="item2" data-aos="fade-up">;
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.