简体   繁体   English

HTML / CSS使链接成为背景图像

[英]HTML/CSS Making a Link a Background Image

I have tried looking up several ways to make my specific image the background of a webpage, but it hasn't worked. 我尝试了几种方法来使我的特定图像成为网页的背景,但是它没有用。 I tried 我试过了

<style>
body {
    background-image: url("ice_dna.jpg");
background-repeat: no-repeat;
}
</style>

to no avail. 无济于事。 I even tried 我什至试过

<body background="File:Ice-Binding-DNA--.jpeg">
<p><a href="http://*LINK*"</a></p>
</body>

But this just made the background into a link to the image... I tried making the background just the link, but that didn't work either. 但这只是使背景成为了指向图像的链接...我试图使背景仅是链接,但是那也不起作用。 The only way I can display the image is as img src="...". 我可以显示图像的唯一方法是img src =“ ...”。 Is there a way to make that image source into the background? 有没有办法使该图像源成为背景?

If you can display the image using <img src="..."> , then there shouldn't be anything wrong with the image itself. 如果可以使用<img src="...">显示图像,则图像本身应该没有问题。 Your CSS also looks good to me. 您的CSS对我来说也不错。 Indeed, it works just fine in a snippet like this: 确实,在如下代码段中它可以正常工作:

 body { background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png"); background-repeat: no-repeat; } 

Since you say that you're using an inline <style> element for your CSS, the problem can't even be caused by relative URLs (which, in an external style sheet, would get resolved relative to the location of the style sheet rather than the location of the HTML page). 既然您说您正在为CSS使用内联<style>元素,那么问题甚至可能不是由相对URL引起的(在外部样式表中,相对URL相对于样式表的位置会得到解决比HTML页面的位置)。

Thus, I'm forced to conclude that your problem cannot be reproduced as described, and must be caused by something that you have not described in your question. 因此,我不得不得出这样的结论:您的问题无法按所述方式重现,并且一定是由您在问题中未说明的原因引起的。 I have therefore voted to close your question, as any answers to it at this point would have to be pure guesswork. 因此,我投票结束了您的问题,因为此时对它的任何回答都必须纯粹是猜测。

Ps. PS。 This really should have been a comment, but one can't include snippets in a comment. 这确实应该是评论,但评论中不能包含摘要。 I've instead marked this answer as Community Wiki, so that I won't get any rep from up/down votes to it. 相反,我将此答案标记为Community Wiki,这样我就不会从上/下投票中获得任何代表。

You would need to make the page itself "full height". 您需要将页面本身设置为“全高”。 By default, it has no height. 默认情况下,它没有高度。 And then you should be able to apply your background: 然后,您应该能够应用背景:

body, html {
    height: 100%;
}
body { 
    background-image: url("img_girl.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

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