0
小提琴:https://jsfiddle.net/jzhang172/Lhpx8u3g/CSS:如何轉換背景而不是內容?
在我的每一個框,字體變換大小明智與我的背景,我怎麼專門讓這個只有我的背景變換,但我的字體大小保持靜態?
*{
margin:0;
padding:0;
box-sizing:border-box;
}
div#middlebottom {
border-top: 5px solid white;
display: flex;
flex-wrap:wrap;
}
.bottom-section{
border: 3px solid white;
border-right: 1.5px;
width:50%;
height:300px;
display: flex;
justify-content: center;
align-items: center;
background:gray;
margin-bottom:10px;
position:relative;
overflow:hidden;
}
.bottom-section h2{
font-size:6em;
font-family:Nothing You Could Do;
color:white;
text-shadow: 2px 2px 2px #6B6B6B;
}
#articles .bottom-wrap{
background:url('img/bottom/1.jpg');
background-repeat: no-repeat;
background: 13% auto;
background-position-y: -234px;
background-size: 100% auto;
}
#projects .bottom-wrap{
background:url('img/bottom/2.jpg');
background-repeat: no-repeat;
background: 13% auto;
background-position-y: -234px;
background-size: 100% auto;
transition:1s;
}
#articles h2,#projects h2{
z-index:5;
}
.bottom-wrap:before{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
content:"";
background-color:rgba(0, 0, 0, 0.65);
transition:1s;
}
.bottom-wrap:hover{
transform: scale(1.21);
}
.bottom-wrap:hover h2{
color:#4DE5FF;
}
#articles .bottom-wrap:hover:before{
background-color:white;
}
#projects .bottom-wrap:hover:before{
background-color:white;
}
.bottom-wrap{
display: flex;
justify-content: center;
align-items: center;
height:100%;
width:100%;
transition:1s;
}
.image-mover h2{
font-size:4em;
color:white;
font-family:raleway;
}
.image-mover span.featured-text{
font-size:.7em;
background:none;
color:#6686FF;
}
span.featured-thing{
color:green;
}
.featured-wrap:before{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
content:"";
background-color:rgba(0, 0, 0, 0.65);
transition:1s;
}
.featured-wrap:hover:before{
background-color:rgba(255, 255, 255, 0);
}
.featured-wrap:hover{
transform: scale(1.21);
}
.featured-wrap{
flex-direction: column;
background:url('http://www.intrawallpaper.com/static/images/backgrounds_2_9AyfSD9.jpg');
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% auto;
display: flex;
align-items: center;
justify-content: center;
transition:1s;
}
.featured-wrap h2{
text-shadow: 2px 2px 2px black;
transition:1s;
z-index:3;
}
.featured-wrap:hover h2{
color:#4DE5FF;
font-size:6em;
}
.image-mover {
overflow: hidden;
height: 300px;
width: 100%;
}
<div class="section" id="middlebottom">
<div class="image-mover">
<div class="featured-wrap">
<h2><span class="featured-text">hello |</span> <span class="featured-thing">Text</span></h2>
<h3 class="descrip">A Description.</h3>
</div>
</div>
<div class="bottom-section" id="articles">
<div class="bottom-wrap">
<h2>Articles</h2>
</div>
</div>
<div class="bottom-section" id="projects">
<div class="bottom-wrap">
<h2>Projects</h2>
</div>
</div>
</div>
你可以分享一個小提琴?我指的是字體大小而不是字體顏色。 – Snorlax
oops。我沒有正確閱讀。你想在底部兩個div的文本保持相同的字體大小?但仍然想要顏色效果? –
基本上,我希望每個div上的字體都保持相同的尺寸,顏色可以改變,但這並不重要。 – Snorlax