Demo Fiddle

Question

我试图摆脱我页面上的很多div，所以我想知道这是不是＆＃34; tile＆＃34;可以在不使用一个的情况下完成。

这样的事情：

<a href="mks.html" class="big-tile big-tile-1">
    <h1>town<br>
    library</h1>  
</a>

锚标签有背景：url（big-tile-1）top no-repeat;我猜。大瓷砖具有静态宽度和高度。但是我如何设计h1的样式呢？你能帮帮我吗？

Answer 1

您可以执行以下操作： JSFiddle Demo

<强> CSS

.big-tile { 
    border:10px solid #ccc; 
    display:inline-block;
    position:relative;
    height:200px;
    width:200px;
    color:#fff;
    background:url("http://lorempixel.com/400/200/nature/");
}

.big-tile h1 {
    margin:0; 
    background:teal; 
    position:absolute; 
    padding:20px; 
    bottom:0; 
    left:0; 
    right:0;  
}

或者如果你想要标记中的图像而不是背景图像 - 你可以这样做： http://jsfiddle.net/UFUq5/3/

Answer 2

Demo Fiddle

HTML

<a href="#">
    town<br />
    library
</a>

CSS

a {
    display:inline-block;
    height:450px;
    width:300px;
    background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
    background-color:teal;
    background-size:300px 300px;
    background-repeat:no-repeat;
    padding-top:350px;
    padding-left:50px;
    box-sizing:border-box;
    color:white;
    text-decoration:none;
    font-family:arial;
    font-size:20px;
    border:10px solid #c0c0c0;
}

Answer 3

从技术上讲，您不需要使用big-tile-1类。但你可以这样做：http://jsfiddle.net/RU23A/1/

有一些变化： 1.将图像添加到背景URL 2.将字体更改为该字体。

Answer 4

你可以这样做：

<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>  

</a>

然后你的css：

#image-overlay{
    width: 300px;
    height: 500px;
    position: relative;
    border: 10px #999 solid;
    border-radius: 1px;
}
#image-overlay h1{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: green ////whatever your choice
    color: white;
    padding: 10px;
    font-family: //your choice
    font-size: 20px;
}

我如何设计这样的div？

4 个答案:

Demo Fiddle