twitter-bootstrap 如何在 BootStrap .carousel-control 中使用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17975830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Use Background Image in BootStrap .carousel-control
提问by Behseini
Can you please let me know how I can update the .carousel-controlCSS to use a background image like This Arrowsimage?
I tried to update this CSS code by adding the
你能告诉我如何更新.carousel-controlCSS 以使用像这个箭头图像这样的背景图像吗？
我试图通过添加
position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 50px;
width: 51px;
background-image: url(http://www.promap.ca/img/arrows.png);
/*max-height:20%;
max-width:12%;
background-size:200% 200%;*/
To following code but it didn't go through!
下面的代码，但它没有通过！
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
right: 15px;
left: auto;
}
.carousel-control:hover,
.carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}
回答by KyleMit
Bootstrap Carousel Orientation
Bootstrap 旋转木马方向
I'm also not sure whereyou want this image to go. Where it gets put is very important
我也不能肯定在那里你想要这个形象去。放在哪里很重要
Look at this Bootplyto see where each of the css background colors gets applied - that's where your image will go:
查看此Bootply以了解应用每种 css 背景颜色的位置 - 这就是您的图像所在的位置：
.carousel .container {
background-color: red;
}
.carousel-control {
background-color: green;
}
.carousel .item {
background-color: black;
}
.carousel-caption h1,
.carousel-caption .lead {
background-color: yellow;
}
Customize Carousel Arrows
自定义旋转木马箭头
I'm guessing that you're trying to customize the arrows specifically since that's the name of your image file.
我猜您正在尝试专门自定义箭头，因为这是您的图像文件的名称。
By Default the arrow image is just a <or >character by using glyphsto specify the contentof the anchor tag with the beforeselector as seen in the bootstrap.cssfile here:
默认情况下，箭头图像只是一个<or>字符，通过使用字形使用before选择器指定锚标记的内容，如此处的文件所示：bootstrap.css
.carousel-control .icon-prev:before { content: '39'; }
.carousel-control .icon-next:before { content: '3a'; }
You can add whatever content you'd like for left and right arrows by specifying it in the innerHtml of the arrow anchor tags
您可以通过在箭头锚标记的innerHtml 中指定来为左箭头和右箭头添加任何您想要的内容
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">...</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<img src="http://i.imgur.com/QPWSDdP.png"/>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<img class="flipped" src="http://i.imgur.com/QPWSDdP.png" />
</a>
</div>
If you have a different image for the next arrow, you can use that, or you can apply a css class to it and flip it horizontally with the following css:
如果下一个箭头有不同的图像，您可以使用它，或者您可以对其应用 css 类并使用以下 css 水平翻转它：
.flipped {
-webkit-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
Also, add some css so the carousel image defaults don't apply to your arrows:
此外，添加一些 css 以便轮播图像默认值不适用于您的箭头：
#myCarousel a img {
width: 20px !important;
height: 40px !important;
}
Demo in jsFiddle
jsFiddle 中的演示
回答by alexd
If you want to use background image and hide default icons
如果要使用背景图像并隐藏默认图标
.carousel-control .icon-prev:before { content: ''; }
.carousel-control .icon-next:before { content: ''; }
回答by Luke Richter
.carousel-control {
.carousel 控制 {
width: 54px;
height: 54px;
background: url(images/arrow_slide_sprite.png) -10px 0 no-repeat;
display: block;
position: absolute;
top: 50%;
margin-top: -27px;
z-index: 10;
cursor: pointer;
}
}
回答by Max Zhukov
In your code there is broken link and there is no quotes in address.
在您的代码中，链接断开，地址中没有引号。
background-image: url('http://www.promap.ca/img/arrows.png');
