CSS图像

图像是任何Web应用程序的重要组成部分。通常不建议在Web应用程序中包含很多图像，但是在需要的地方使用它们非常重要。 CSS帮助我们控制Web应用程序中图像的显示。

CSS中图像的样式类似于使用边框和边距的元素的样式。有多个CSS属性，例如border属性，height属性，width属性等，可以帮助我们为图像设置样式。

让我们使用一些插图来讨论CSS中图像的样式。

缩图图片

border属性用于制作缩略图。

例

  
 
 
     
 
  

 
Thumbnail Image

Welcome to javaTpoint
 

透明图像

为了使图像透明，我们必须使用opacity属性。此属性的值分别在0.0到1.0之间。

例

  
 
 
     
 
  

 
Transparent Image

Welcome to javaTpoint

圆角图像

border-radius属性设置边框图像的半径。它用于创建四舍五入的图像。圆角的可能值如下：

• border-radius：设置所有四个border-radius属性。
• border-top-right-radius：设置右上角的边框。
• border-top-left-radius：设置左上角的边界。
• border-bottom-right-radius：设置右下角的边框。
• border-bottom-left-radius：设置左下角的边框。

例

  
 
 
     
 
  

 
Rounded Image

Welcome to javaTpoint

 
Circle Image

Welcome to javaTpoint
 

响应图像

它会自动调整以适合屏幕尺寸。用于将图像自动调整到指定的框。

例

 
 
 
     
 
  

 
Responsive image
 
You can resize the browser to see the effect

Welcome to javaTpoint
 

居中图像

我们可以通过使用left-margin和right-margin属性来使图像居中。我们必须将这些属性设置为auto才能制作出块元素。

例

 
 
 
     
 
  

 
Center image

Welcome to javaTpoint