简体   繁体   English

图像可以很好地用作HTML <img> 但不在CSS背景图像上我想念的是什么?

[英]Image works fine as a HTML <img> but not on CSS background-image What I'm I missing?

I'm somewhat new to web development (self learning) and I just can't seem to get over the hump of learning how to add background images on CSS. 我是Web开发(自我学习)的新手,但似乎无法克服学习如何在CSS上添加背景图像的麻烦。

I added a image on HTML and it shows up fine on the web browser, but when I try to add the same image as a Background Image it's not working. 我在HTML上添加了一个图像,并且在Web浏览器上显示得很好,但是当我尝试添加与背景图像相同的图像时,它不起作用。 I'm sure I'm missing something simple but so far I cant figure it out. 我确定我缺少一些简单的东西,但到目前为止我还无法弄清楚。 Here is the code 这是代码

This is my HTML img code that works perfectly fine 这是我的HTML img代码,效果很好

<div class="pic"
<img src="C:\Users\omar\Pictures/applelogoretro.jpg.jpg" atl="happy"
style="width:85%; height:75%;"/>
</div>

Background image HTML 背景图片HTML

<div class="backpic">
<p>This is the TEXT on my BackGround image</p>
</div>

CSS CSS

.backpic{
background-image: url"C:\Users\omar\Pictures/applelogoretro.jpg.jpg";
}

Why does the image work fine as a regular image, but not as a background image. 为什么图像可以正常显示,但不能作为背景图像。 The more detail your answer the more it will help me, thanks in advance to all! 谢谢您,答案越详细,对我的帮助就越大。

可以尝试检查语法,看看是否可以呢?

background-image: url("pathtoyourimage.jpg");

Url in css should be inside parenthesis: CSS中的网址应在括号内:

So this line background-image: url"C:\\Users\\omar\\Pictures/applelogoretro.jpg.jpg"; 因此,此行background-image: url"C:\\Users\\omar\\Pictures/applelogoretro.jpg.jpg";

Should be background-image: url("C:\\Users\\omar\\Pictures/applelogoretro.jpg.jpg"); 应该是background-image: url("C:\\Users\\omar\\Pictures/applelogoretro.jpg.jpg");

As @Raptor and @YAHsaves pointed out, you should use relative paths 正如@Raptor和@YAHsaves指出的那样,您应该使用相对路径

Try checking the syntax error(>), see if it will do this 尝试检查语法错误(>),看看是否会这样做

.pic{ background-image: url(ggg.jpg);  
  background-repeat: no-repeat;
 }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM