CSS - Sử dụng hình ảnh

Hình ảnh đóng một vai trò quan trọng trong bất kỳ trang web nào. Mặc dù không nên bao gồm nhiều hình ảnh, nhưng điều quan trọng vẫn là sử dụng hình ảnh tốt ở bất cứ nơi nào cần thiết.

CSS đóng vai trò kiểm soát tốt việc hiển thị hình ảnh. Bạn có thể đặt các thuộc tính hình ảnh sau bằng CSS.

Các border thuộc tính được sử dụng để đặt chiều rộng của đường viền hình ảnh.
Các height thuộc tính được sử dụng để đặt chiều cao của hình ảnh.
Các width thuộc tính được sử dụng để đặt chiều rộng của hình ảnh.
Các -moz-opacity thuộc tính được sử dụng để đặt độ mờ của hình ảnh.

Thuộc tính Đường viền Hình ảnh

Các biên giới bất động sản của một hình ảnh được sử dụng để thiết lập chiều rộng của một biên giới hình ảnh. Thuộc tính này có thể có giá trị theo độ dài hoặc%.

Chiều rộng không pixel nghĩa là không có đường viền.

Đây là ví dụ -

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính Chiều cao Hình ảnh

Các chiều cao sở hữu của một hình ảnh được sử dụng để thiết lập chiều cao của một hình ảnh. Thuộc tính này có thể có giá trị theo độ dài hoặc%. Trong khi đưa ra giá trị bằng%, nó áp dụng nó đối với hộp có sẵn hình ảnh.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính Chiều rộng Hình ảnh

Các chiều rộng tài sản của một hình ảnh được sử dụng để thiết lập chiều rộng của một hình ảnh. Thuộc tính này có thể có giá trị theo độ dài hoặc%. Trong khi đưa ra giá trị bằng%, nó áp dụng nó đối với hộp có sẵn hình ảnh.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính -moz-opacity

Thuộc tính -moz-opacity của hình ảnh được sử dụng để đặt độ mờ của hình ảnh. Thuộc tính này được sử dụng để tạo hình ảnh trong suốt trong Mozilla. IE sử dụngfilter:alpha(opacity=x) để tạo hình ảnh trong suốt.

Trong Mozilla (-moz-opacity: x) x có thể là một giá trị từ 0,0 - 1,0. Giá trị thấp hơn làm cho phần tử trong suốt hơn (Điều tương tự cũng xảy ra đối với độ mờ cú pháp hợp lệ CSS3: x).

Trong IE (filter: alpha (opacity = x)) x có thể là một giá trị từ 0 - 100. Giá trị thấp hơn làm cho phần tử trong suốt hơn.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau: