문제

Question

attached: screenshot

안녕 모두를 유혹, 내가 일할 수있는 이미지 + 롤오버 효과를 얻기 어려움에 봉착했습니다. (코딩에 익숙하지 않습니다.) 무엇을하려고합니까 :

높이와 너비가 100 % 인 호버 '상자'(불투명도로 표시)에 이미지를 맞춰야합니다. 이미지는 280px x 280px로되어 있지만 그보다 크게 보이며 타일링되거나 반복되는 공간이 alloted space입니까? 누구든지 내가 잘못하고있는 것을 볼 수 있습니까?

PS - 위에서 볼 수있는 다른 2 개의 '추천 작품'이 있으며, 첫 번째 이미지와 동일한 형식이므로 ... 아래의 반복되는 단락과 이미지 태그가 있습니다. 이 이미지들은 일단 맴돌 았을 때 전체 링크의 역할을하기로되어 있지만, 지금까지는 텍스트에 적용되는 것처럼 보입니다 : Vital Voices | 캠페인 ... (스크린 샷을 참조하십시오)

나는 마우스 오버/오버레이에 맞추는 이미지에 대해 더 염려합니다. HTML 여기

img { 
margin-top: 5px; 
padding: 10px; 
float: left;  
} 

.picture { 
width: 280px; 
height: 280px; 
background: url(".png"); 
padding: 20px; 
float: left; 
} 


.overlay { 
width: 100%; 
height: 100%; 
background: url("../images/opacity.png"); 
display: none; 
padding: 10px; 
text-align: center; 
font-weight: bold; 
font-family: Baskerville; 
font-size: 20px; 
} 

.picture:hover .overlay { 
display: block; 
} 

.clearfloat { 
clear: both;  
} 

것 :

<div id="wrapper"> 

<h1>Featured Works</h1> 

<p><a href="branding.html" src="images/VV_2.png"><div class="picture" style="width: 280px; height: 280px; background: url('images/VV_2.png');"><div class="overlay">Vital Voices | Campaign</div></div></a></p> 

<p><a href="typography.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Quote Poster | Typography</div></div></a></p> 

<p><a href="marketing.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Coffee | Marketing</div></div></a></p> 

<div class="clearfloat"></div> 

</div> <!--closes wrapper div--> 

----------------- 갱신 :

<p><a href="branding.html"><img src="images/VV_2.png" width="280px" height="280px" alt="vital voices preview image" class="preview"></a></p><div class="overlay">Vital Voices | Campaign</div> 

다음

는 CSS의

^HTML 코드를 다음과 같이 변경했습니다.이 CSS는 다음으로 변경합니다. (변경된 사진을 미리 보거나 오버레이 정보를 동일하게 유지)

.preview { 
width: 280px; 
height: 280px; 
padding: 20px; 
float: left; 
} 

.preview:hover .overlay { 
display: block; 
} 

... 이미지 위치 지정/크기가 고정되었지만 이제는 오버레이가 적용되지 않습니다. 참조 : screenshot2

attached: screenshot2

Answer 1

이미지가 사용 가능한 공간보다 작은 경우 기본적으로 자신을 반복됩니다 배경 이미지입니다. 이를 변경하려면 background-repeat 속성을 사용하고 no-repeat으로 설정하면됩니다. 그러면 배경이 반복되지 않고 왼쪽 상단에서 시작됩니다. 배경을 중심으로 가져 오려면 background-position 속성을 사용하고 그 값을 center으로 설정해야합니다.

내가 설명 된 효과를 달성하는 방법의 일반적인 예를주지 :

.work a { 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 180px; 
 
    height: 180px; 
 
} 
 

 
.work .title { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
    margin-top: 15px; 
 
    text-align: center; 
 
    background: rgba(255,255,255,0.5); 
 
} 
 

 
.work:hover .title { 
 
    display: block; 
 
}

<h1>Featured Works</h1> 
 

 
<div class="work"> 
 
    <a href="#"> 
 
    <span class="title">Vital Voices | Campaign</span> 
 
    <img src="http://lorempixel.com/180/180/abstract/3/"> 
 
    </a> 
 
</div> 
 

 
<div class="work"> 
 
    <a href="#"> 
 
    <span class="title">Quote Poster | Typography</span> 
 
    <img src="http://lorempixel.com/180/180/abstract/4/"> 
 
    </a> 
 
</div>

작은 팁 : (당신의 HTML의 style 속성 = CSS) 인라인 CSS를 사용하지 마십시오 필요하지 않은 한. 이렇게하면 더 나은 유지 보수를 달성 할 수 있습니다. 불명확 한 것이 있으면 언제든지 물어보십시오.