CSS 이미지

먼저 이미지를 소개하고 설명을 추가한 후 div를 사용하여 전달합니다.

  <div class="image">
    <a href="./1348306907524.jpg" target="_self">
        <img src="1348306907524.jpg" width="150px" height="150px">
    </a>
    </div>
    <div>beautiful </div>

는 다음과 같은 효과입니다.

다음으로 사진 표시를 사용자 정의하기 시작합니다.

사진에 테두리를 추가하고 이에 맞게 설명 글꼴을 수정하고 글꼴 크기를 수정한 다음 전체 div를 테두리가 사진과 일치하도록 왼쪽으로 맞춥니다:

.image{    border: 2px solid darkgrey;    width: auto;    height: auto;    float: left;    text-align: center;    padding: 5px;
}img{    padding: 5px;
}.text{    font-size: 20px;    margin-bottom: 5px;
}

처리 후의 효과입니다

그 후 이미지의 투명도를 디자인할 수 있습니다. 이는 비교적 간단합니다. 이미지에 CSS 설정을 추가하기만 하면 됩니다.

opacity: 0.5;

이 속성의 값 범위 0-1은 투명도를 설정하고 0은 완전히 불투명함을 나타냅니다.

다음은 반투명 렌더링입니다.