[css] 배경 이미지 : 이미지가 작거나 그 반대 인 경우 전체 div를 채우는 방법

Program / 글쓴이

세 가지 문제가 있습니다.

  1. 작은 크기의 div에서 배경 이미지를 사용하려고하면 div에 이미지의 일부만 표시됩니다. 이미지의 전체 또는 특정 부분을 표시하려면 어떻게해야합니까?

  2. 더 작은 이미지가 있고 더 큰 div에서 사용하고 싶습니다. 그러나 반복 기능을 사용하고 싶지 않습니다.

  3. CSS에서 이미지의 불투명도를 조작하는 방법이 있습니까?

답변

div 크기에 맞게 이미지 크기를 조정합니다.
CSS3를 사용하면 다음을 수행 할 수 있습니다.

/* with CSS 3 */
#yourdiv {
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

웹 페이지에서 배경 이미지를 늘리는 방법 :

불투명도 정보 

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

또는 CSS 이미지 불투명도 / 투명도를보십시오

답변

이미지를 자동으로 확대하고 일부를 채우지 않고 전체 div 섹션을 덮으려면 다음을 사용하십시오.

background-size: cover;

답변

이것은 나를 위해 완벽하게 작동했습니다.

background-repeat: no-repeat;
background-size: 100% 100%;

답변

아래 코드 세그먼트를 시도해보십시오. 전에 직접 시도했습니다.

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}

답변

오히려주는 것보다 background-size:100%;

우리가 줄 수있는 background-size:contain;

다양한 옵션이 체크 아웃을 사용 가능한 : http://www.css3.info/preview/background-size/

답변

이것은 매력처럼 작동합니다.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;

답변

  1. 나는 yossi의 예에 동의하며 div에 맞게 이미지를 늘리지 만 약간 다른 방식으로 확장합니다 (css 2.1에서는 약간 유연하지 않기 때문에 배경 이미지없이). 전체 이미지보기 :

    <div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

  2. 배경 위치를 사용하여 이미지의 일부 표시 :

    #yourdiv
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

  3. (1)의 첫 번째 부분과 동일하게 이미지가 div로 확장되므로 더 크거나 작게 둘 다 작동합니다.

  4. yossi와 동일합니다.