css背景-图像根本不显示
css背景-图像根本不显示
提问于 2018-06-10 05:27:25
我在使用css而不是HTML代码中的标记来显示背景图像时遇到了麻烦，我看不出哪里出了问题。我经历了多个线程，人们建议使用' background‘而不是’background- <p>‘，或者在css中加上'display:block;’，给我想要的背景图片加上一些高度和宽度，等等。如果我设置了“背景颜色”选择器，<p>就会做出反应，但我就是看不到背景图像。我也试着去掉js代码，看看有没有冲突，也试着完全去掉css，把背景图片直接放到html里，也没有显示出来。我确信我写的相对路径是正确的。
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src')
if(mySrc === 'images/gang.jpg') {
myImage.setAttribute ('src','images/gang2.jpg');
} else {
myImage.setAttribute ('src','images/gang.jpg');
}
}
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Tortoises are cool as fuck, ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'Tortoises are cool as fuck, ' + storedName;
}
myButton.onclick = function() {
setUserName();
} html {
font-size: 20px;
font-family: 'Questrial', sans-serif;
background-color: #6b4e15;
color: #332e27;
}
body {
width: 600px;
margin: 0 auto;
background-color: #eabe69;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
img {
display: block;
margin: 0 auto;
width: 100%
}
h1 {
margin: 0;
padding: 20px 0;
color: #6b4e15;
text-shadow: 3px 3px 2px black;
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0px;
}
a {
text-decoration: none;
color: #332e27;
border: 1px solid #332e27;
border-radius: 5px;
padding-left: 7px;
padding-right: 7px;
margin: 0 0 0 0;
}
a:hover {
color: #eabe69;
background-color: #332e27;
border: 1px solid #332e27;
border-radius: 5px;
transition-duration: 0.4s;
}
address {
text-align: center;
}
#squirtel {
background-image: url('./images/pokemon.png');
width: 1000;
height: 1000;
} <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title> Tortoise is cool </title>
<link rel='stylesheet' href='styles/style.css' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Questrial' rel="stylesheet">
<meta name='author' content='Jan Jansa'>
<meta name='description' content='The best page about tortoises'>
<meta property='og:image' content='images/gang.jpg'>
<meta property='og:description' content='Ahoj tohle je zelvi stranka o zelvach a je hodne v pohode'>
<meta property='og:title' content='Hey! Tortoise is cool!'>
<meta property='og:type' content='website'>
<meta property='og:site_name' content='Hey! Tortoises are cool!'>
<meta property='og:url' content='https://jankko7.github.io/'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
</head>
<body>
<h1> Tortoise is cool! </h1>
<img src='images/gang.jpg' alt='Four little tortoises on white stone lying with their bellies up'>
<p> <a href='#changeuser'> Tortoises are: </a></p>
<ul>
<li> Cool </li>
<li> Osinka </li>
<li> Ferda </li>
</ul>
<p id='squirtel'> <a href='https://en.wikipedia.org/wiki/Marginated_tortoise' target='_blank'>
The marginated tortoise (Testudo marginata) </a>
is a species of tortoise found in Greece, Italy and the Balkans in southern
Europe. It is the largest European tortoise, reaching a weight of up to 5 kg (11 lb) and
a length of 35 <abbr title='centimeters'>cm</abbr> (14 <abbr title='inches'>in</abbr>). Its shell is oblong and has a notable thickness
around the middle of the body. The posterior end of the shell has
a saw-like formation, flanged outward <strong>like a bell</strong>. The carapaces of adult
specimens are almost completely black, with yellow highlights. The front
sides of the limbs are covered with large scales. The tail is notable for
a lengthwise marking and for an undivided carapace over the tail.
The marginated tortoise is herbivorous, and hibernates for the winter.
The Marginated Tortoise is recorded for the first time from Turkey, from
the delta of the Küçük Menderes River which is less than 250 <abbr title='kilometers'>km</abbr> away from
the closest known area in Greece.
</p>
<h2> Tortoise X Turtle X Blastoise </h2>
<dl>
<dt> <a href='images/tortoise.jpg'>Tortoise</a></dt>
<dd> a reptile with shield living on <strong>a dry land</strong>. </dd>
<dt> <a href='images/turtle.jpg'>Turtle</a></dt>
<dd> a reptile with shield living in <strong> a sea </strong> or <strong> an ocean </strong>.</dd>
<dt> <a href='images/blastoise.png'>Blastoise</a></dt>
<dd> a reptile with a shield and ability to <strong> hydro blast </strong> you to the flippin sky. </dd>
</dl>
<button id='changeuser'> Change User </button>
<h2> Contact me </h2>
<p> You can <a href='mailto:jan.jansa95@gmail.com?cc=jan.jansa@icloud.com&subject=Let%20me%20ask%20you%20bout%20turtles%20bro!&body=Hi%20friend%20let%20me%20ask%20you%20this%2C%0B%0B'>
mail me </a> about some more tortoise info!
</p>
<p><address> © Jan Jansa </address></p>
<script src='scripts/main.js'></script>
</body>
</html>
有什么想法吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50778701
复制相关文章
相似问题