설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)

云罗郡主

Nov 09, 2018 pm 03:59 PM

이 글의 내용은 이미지 효과 설정에 관한 내용입니다. 참고할만한 내용이 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

이미지는 모든 웹페이지에서 중요한 역할을 합니다. 많은 이미지를 포함하는 것은 권장되지 않지만 필요할 때마다 좋은 이미지를 사용하는 것은 여전히 중요합니다.

CSS는 이미지 표시를 제어하는 데 중요한 역할을 합니다. CSS를 사용하여 다음 이미지 속성을 설정할 수 있습니다.

border 속성은 이미지 테두리의 너비를 설정하는 데 사용됩니다.

height 속성은 이미지의 높이를 설정하는 데 사용됩니다.

width 속성은 이미지의 너비를 설정하는 데 사용됩니다.

-moz 불투명도 속성은 이미지의 불투명도를 설정하는 데 사용됩니다.

1. 이미지 테두리 속성

이미지의 테두리 속성은 이미지 테두리의 너비를 설정하는 데 사용됩니다. 이 속성의 길이나 값은 %일 수 있습니다.

0픽셀 너비는 테두리가 없음을 의미합니다. 예:

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png"  class="lazy"  style = "border:0px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)" >
      <br />
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png"  class="lazy"  style = "border:3px dashed red;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)" >
   </body>
</html>

로그인 후 복사

표시 효과는 다음과 같습니다.

설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)

2 이미지 높이 설정 속성:

이미지의 너비 속성은 이미지의 너비를 설정하는 데 사용됩니다. . 이 속성의 길이나 값은 %일 수 있습니다. 값은 %로 표시되지만 이미지를 사용할 수 있는 상자에 적용됩니다.

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png"  class="lazy"  style = "border:1px solid red; height:100px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)" >
      <br />
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png"  class="lazy"  style = "border:1px solid red; height:50%;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)" >
   </body>
</html>

로그인 후 복사

설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)

3.moz-opacity attribute

이미지의 -moz-opacity 속성은 이미지의 불투명도를 설정하는 데 사용됩니다. 이 속성은 Mozilla에서 투명한 이미지를 만드는 데 사용됩니다. IE는 filter:alpha(opacity=x)를 사용하여 투명한 이미지를 만듭니다. [추천 자료: CSS에서 이미지의 투명도와 불투명도를 얻는 방법]

Mozilla(-moz-opacity: x)에서 x는 0.0에서 1.0 사이의 값일 수 있습니다. 값이 낮을수록 요소가 더 투명해집니다(불투명도에 대한 CSS3 유효한 구문은 동일함: x).

IE(필터: 알파(불투명도 = x))에서 x는 0에서 100 사이의 값일 수 있습니다. 값이 낮을수록 요소가 더 투명해집니다. 코드는 다음과 같습니다.

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/369/557/389/1541750120148707.png"  class="lazy"  style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)" >
   </body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

설정된 이미지 효과를 사용하는 방법은 무엇입니까? (코드 예)