1. 首頁
  2. 問答
  3. 添加圖片在塊

添加圖片在塊

2014-12-09 70 views
1

我使用這個迷你的價格表：http://codepen.io/joejoinerr/pen/CJAkK添加圖片在塊

我怎樣才能把圖像放在它的上面？就像這樣：

也在這裏定價表的代碼：

HTML：

<div class="pricing"> 
    <div class="price-option price-option--low"> 
    <div class="price-option__detail"> 
     <span class="price-option__cost">$0</span> 
     <span class="price-option__type">Freeuser</span> 
    </div> 
    <a href="#" class="price-option__purchase">Get</a>

CSS：

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 
html, 
body { 
    height: 100% 
} 
body { 
    background: #454c4f; 
    font: 1em/1.5 'Droid Sans', sans-serif; 
} 
.pricing { 
    @include translate(-49%, -49.1%); 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 310px; 
    font-size: 0; 
    opacity: 1; 
    transition: opacity .2s ease; 
} 

.price-option { 
    display: inline-block; 
    width: 6.25em; 
    vertical-align: middle; 
    margin-right: 0.3125em; 
    font-size: 16px; 
    opacity: 1; 
    transition: opacity .2s ease; 
} 
.price-option:last-child { margin-right: 0; } 

.pricing:hover .price-option { opacity: 0.6; } 
.pricing:hover .price-option:hover { opacity: 1; } 

.price-option__detail { 
    padding: 2em 0; 
    background: white; 
    text-align: center; 
} 
.price-option--low .price-option__detail { border-radius: .25em 0 0 0; } 
.price-option--mid .price-option__detail { padding: 2.3em 0; border-radius: .25em .25em 0 0; } 
.price-option--high .price-option__detail { border-radius: 0 .25em 0 0; } 

.price-option__cost, 
.price-option__type { 
    display: block; 
} 
.price-option__cost { 
    font-size: 1.5em; 
    color: #383838; 
} 
.price-option__type { 
    font-size: .7em; 
    text-transform: uppercase; 
    color: #909090; 
}  
.price-option__purchase { 
    position: relative; 
    display: block; 
    padding: .6em; 
    font-size: .875em; 
    font-weight: bold; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: rgba(0,0,0,0.6); 
}  
.price-option--low .price-option__purchase { background: #a7d155; border-radius: 0 0 0 .25em; } 
.price-option--mid .price-option__purchase { background: #eada42; border-radius: 0 0 .25em .25em; } 
.price-option--high .price-option__purchase { background: #e54e4b; border-radius: 0 0 .25em 0; } 
.price-option__purchase:before { 
    content: ''; 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left: -5px; 
    border-width: 0 5px 5px; 
    border-style: solid; 
}

任何幫助表示讚賞

來源

2014-12-09 mamady

+1

在定價div包裝器之前添加圖片，然後將其放置得相對較低以滿足您的需求？ – 2014-12-09 13:14:35

+0

添加'：before'：僞元素。 ---->更新了[codepen]（http://codepen.io/chipChocolate/pen/QwyZbe）。 – 2014-12-09 13:23:01

回答

3

一種解決方案是使用僞元素:before：

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100% 
 
} 
 
body { 
 
    background: #454c4f; 
 
    font: 1em/1.5'Droid Sans', sans-serif; 
 
} 
 
.pricing { 
 
    @include translate(-49%, -49.1%); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 310px; 
 
    font-size: 0; 
 
    opacity: 1; 
 
    transition: opacity .2s ease; 
 
} 
 
.price-option { 
 
    display: inline-block; 
 
    width: 6.25em; 
 
    vertical-align: middle; 
 
    margin-right: 0.3125em; 
 
    font-size: 16px; 
 
    opacity: 1; 
 
    transition: opacity .2s ease; 
 
} 
 
.price-option:before { 
 
    content: ""; 
 
    background-image: url(http://placehold.it/50x50); 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 50px; 
 
    top: -25px; 
 
    margin-left: 25px; 
 
} 
 
.price-option:last-child { 
 
    margin-right: 0; 
 
} 
 
.pricing:hover .price-option { 
 
    opacity: 0.6; 
 
} 
 
.pricing:hover .price-option:hover { 
 
    opacity: 1; 
 
} 
 
.price-option__detail { 
 
    padding: 2em 0; 
 
    background: white; 
 
    text-align: center; 
 
} 
 
.price-option--low .price-option__detail { 
 
    border-radius: .25em 0 0 0; 
 
} 
 
.price-option--mid .price-option__detail { 
 
    padding: 2.3em 0; 
 
    border-radius: .25em .25em 0 0; 
 
} 
 
.price-option--high .price-option__detail { 
 
    border-radius: 0 .25em 0 0; 
 
} 
 
.price-option__cost, 
 
.price-option__type { 
 
    display: block; 
 
} 
 
.price-option__cost { 
 
    font-size: 1.5em; 
 
    color: #383838; 
 
} 
 
.price-option__type { 
 
    font-size: .7em; 
 
    text-transform: uppercase; 
 
    color: #909090; 
 
} 
 
.price-option__purchase { 
 
    position: relative; 
 
    display: block; 
 
    padding: .6em; 
 
    font-size: .875em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: rgba(0, 0, 0, 0.6); 
 
} 
 
.price-option--low .price-option__purchase { 
 
    background: #a7d155; 
 
    border-radius: 0 0 0 .25em; 
 
} 
 
.price-option--mid .price-option__purchase { 
 
    background: #eada42; 
 
    border-radius: 0 0 .25em .25em; 
 
} 
 
.price-option--high .price-option__purchase { 
 
    background: #e54e4b; 
 
    border-radius: 0 0 .25em 0; 
 
} 
 
.price-option__purchase:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: -5px; 
 
    border-width: 0 5px 5px; 
 
    border-style: solid; 
 
} 
 
.price-option--low .price-option__purchase:before { 
 
    border-color: transparent transparent #a7d155; 
 
} 
 
.price-option--mid .price-option__purchase:before { 
 
    border-color: transparent transparent #eada42; 
 
} 
 
.price-option--high .price-option__purchase:before { 
 
    border-color: transparent transparent #e54e4b; 
 
}
<div class="pricing"> 
 
    <div class="price-option price-option--low"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$0</span> 
 
     <span class="price-option__type">Freeuser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Get</a> 
 
    </div> 
 
    <div class="price-option price-option--mid"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$20</span> 
 
     <span class="price-option__type">Poweruser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Buy</a> 
 
    </div> 
 
    <div class="price-option price-option--high"> 
 
    <div class="price-option__detail"> 
 
     <span class="price-option__cost">$40</span> 
 
     <span class="price-option__type">Superuser</span> 
 
    </div> 
 
    <a href="#" class="price-option__purchase">Buy</a> 
 
    </div> 
 
</div>

來源

2014-12-09 13:19:01

0

您可以將圖像添加到容器和絕對位置時，例如

<div class="price-option price-option--mid"> 
    <img class="top_image" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Banana-icon.png"/> 
    <div class="price-option__detail"> 
     <span class="price-option__cost">$20</span> 
     <span class="price-option__type">Poweruser</span> 
    </div> 
    <a href="#" class="price-option__purchase">Buy</a> 
</div> 

.top_image { 
    position:absolute; 
    top:-60px; 
}

http://codepen.io/anon/pen/YPwJXa

來源

2014-12-09 13:21:11 MLeFevre

相關問題

 相關問題