📜  CSS图像

📅  最后修改于: 2020-11-04 06:35:41             🧑  作者: Mango

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