-1

大家，早安，

我正在尝试通过 id 为动态 href 提供一些样式...假设我想为我的“品牌”id 使用背景图像，我该如何挂钩呢？

谢谢。我知道这对某些人来说可能很明显。

<div id="slides">
    <div class="slides-container">

        <div class="slide">
            <div class="hello">
                <div class="topper">Move</div>
                <div class="slab">your business forward</div></br>
                <div class="paint"><a href="">see how we make it happen</a></div>
                <img src="images/move.png"  width="1024" height="682" id="Intro">
            </div>
        </div>

        <div class="slide">
            <div class="caption">Branding</div>
            <div class="slideimage" id="Branding"><img src="images/surly.jpeg" width="1024" height="682" ></div>
        </div>

        <div class="slide">
            <div class="caption">Web/Mobile</div>
            <div class="slideimage"  id="Web/Mobile"><img src="images/shot.jpg"  width="1024" height="682"></div>
        </div>

        <div class="slide">
            <div class="caption">Labs</div>
            <div class="slideimage" id="Labs"><img src="images/affinity.jpeg" width="1024" height="685"></div>
        </div>

        <div class="slide">
            <div class="caption">FEATURE PROJECT _CUSTOM TYPE style</div>
            <div class="slideimage" id="featured"><img src="images/affinity.jpeg" width="1024" height="685"></div>
        </div>
    </div>
4

6 回答 6

7

您在 CSS 中所要做的就是为您的 id 添加一个背景 URL。所以它看起来像这样：

 #Branding{

 background-image:url('images/surly.jpeg');

 }
于 2013-07-29T13:21:49.783 回答
4

您将需要这一点 css 来完成此操作。 

 #Branding{
     background: url("your image location");
}
于 2013-07-29T13:22:12.677 回答
1 
.class #id

在类中设置 ID 样式。在这种情况下，也许：

.caption #Branding {
    ...
}

但是，您可以只使用 id：

#Branding {
    ...
}

如果您想了解有关选择器的更多信息，请尝试http://www.w3schools.com/cssref/css_selectors.asp

于 2013-07-29T13:22:05.177 回答
0

创建一个id并为其分配一个样式。

的HTML：

<div class="caption" id="branding">Branding</div>

CSS：

#branding{background-image:url(...); /* Your image path here */}

编辑：

另一种方法是使用nth childCSS 选择器。

这是工作演示

的HTML：

<div class="caption">Development</div>
<div class="caption">Labs</div>
<div class="caption">Branding</div>
<div class="caption">Designing</div>

CSS：

.caption{background: url("existing image path");}
.caption:nth-child(3){background: url("new image path");}

希望这可以帮助。

于 2013-07-29T13:24:20.900 回答
0

您可以在 html 页面的标题中使用类似的内容：

<style>
#branding
{
background-image:url('image.png');
background-color:#ababab;
}
</style>

如果您只想要一个图像，只需使用背景图像，或者您可以将背景颜色用于静态颜色！

于 2013-07-29T13:22:49.887 回答
-3

我认为您不能仅使用 CSS 来做到这一点。尝试使用一些javascript：

  document.getElementById('imageID').src = "SomeSrc";
于 2013-07-29T13:21:36.890 回答