更改对象的背景图像- html/css
更改对象的背景图像- html/css
提问于 2015-11-03 01:23:55
我正在制作我的报告对开本，并使用了互联网上的一个画廊。我没有制作原始的，但我调整了它，以适应我的网站，并根据我的喜好改变了它。在最初的版本中，左右按钮使用了箭头图像，但当我将css更改为使用文件夹中的箭头时，它们不会显示，并且我尝试的任何内容都不起作用。请记住，这个图库有很多代码，所以我只打算发布相关的css代码和html代码。
这没有任何意义，因为相同的代码可以在原始代码上运行，我不确定我是否更改了一些东西而没有注意到。在有人说文件路径正确之前，我把我所有的html页面都放在一个文件夹里，然后是“图片”文件夹，里面有我所有的图片，包括next.png和prev.png。我可以提供截图，更多的代码，任何会有帮助的东西，谢谢。
回答 3
Stack Overflow用户
发布于 2015-11-03 01:47:02
尝试将您的图像上传到免费托管网站，并使用绝对文件引用而不是相对文件引用。
#slide5:checked ~ #controls label:nth-child(4) {
background: url('https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png') no-repeat;
float: left;
margin: 0 0 0 -5px;
display: block;
background-color:#000;
}改变图像路径对我来说很有效。
Stack Overflow用户
发布于 2015-11-03 01:47:16
您没有他们在示例中使用的按钮，但幸运的是，您可以使用任何您喜欢的按钮！如果你愿意，你可以试着回到源代码中去寻找它们，或者你也可以创建/找到你自己的，我只是暂时放了一些随机的箭头。我还插入了注释，一旦找到新的箭头图像，您就可以将它们放在其中。希望它能帮上忙！
以下是更新后的小提琴：
https://jsfiddle.net/4nke76ye/2/
#cc-slider {
text-align: center;
margin: 0 auto;
max-width: 850px;
width:500px;
position: absolute;
left:45%;
padding-bottom:30px;
}
#cc-slider input {
display: none;
}
#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#cc-slides article img {
width: 500px;
}
#cc-slides .inner {
width: 500%;
line-height: 0;
}
#cc-slides article {
width: 20%;
float: left;
}
#controls {
margin: -8% 0 0 84%;
width: 15%;
height: 50px;
}
#controls label {
display: none;
width: 40px;
height: 40px;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #f89e67;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
/*this is where the next arrow image goes */
background: url('http://www.hamptoninnbwiairport.com/wp-content/themes/vista/assets/images/next.png') no-repeat;
float: right;
margin: 0 0px 0 0;
display: block;
background-color:#000;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
/*this is where the previous arrow image goes */
background: url('http://www.belgers.com/walter/computers/onyx/neat-round.theme/prev.png') no-repeat;
float: left;
margin: 0 0 0 -5px;
display: block;
background-color:#000;
}
/* cctooltip Box */
.cctooltip {
color: #FFFFFF;
font-style: italic;
line-height: 20px;
margin-top: 560px;
opacity: 0;
position: absolute;
text-align: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.cctooltip h3 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 16px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
padding-right:10px;
font-family: "Tahoma";
}
/* cc-slider Styling */
#cc-slides {
margin: 45px 0 0;
padding: 1%;
background: #000;
}
/* Animation */
#cc-slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#cc-slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}<article id="cc-slider">
<input checked="checked" name="cc-slider" id="slide1" type="radio">
<input name="cc-slider" id="slide2" type="radio">
<input name="cc-slider" id="slide3" type="radio">
<input name="cc-slider" id="slide4" type="radio">
<input name="cc-slider" id="slide5" type="radio">
<div id="cc-slides">
<div id="overflow">
<div class="inner">
<article>
<div class="cctooltip">
<h3>Half adder/ full adder</h3>
</div>
<img src="https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png">
</article>
<article>
<div class="cctooltip">
<h3>Seven segment display</h3>
</div>
<img src="https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png"> </article>
<article>
<div class="cctooltip">
<h3>content</h3>
</div>
<img src="https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png"> </article>
<article>
<div class="cctooltip">
<h3>content</h3>
</div>
<img src="https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png"> </article>
<article>
<div class="cctooltip">
<h3>content</h3>
</div>
<img src="https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png"> </article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</article>
如果你有任何其他问题，请告诉我！
Stack Overflow用户
发布于 2015-11-03 01:57:01
我做到了。我刚换掉了
background: url('../Images/Next.png') no-repeat;使用
background: url("Images/Next.png"); no-repeat;感谢大家的帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33483361
复制相关文章
相似问题
腾讯云开发者
