CSS(層疊樣式表)不僅可以控制文本的樣式,還可以對圖片進行各種處理。下面介紹幾種CSS對圖片的處理方法。
/* 1.改變圖片大小 */ img { width: 50%; /* 把圖片寬度調整為父元素的50% */ height: auto; /* 讓高度自適應以保持比例不變 */ } /* 2.添加邊框 */ img { border: 1px solid black; /* 添加1像素寬的黑色實線邊框 */ } /* 3.添加圓角 */ img { border-radius: 10px; /* 把圖片的四個角設置為10像素的圓角 */ } /* 4.設置透明度 */ img { opacity: 0.5; /* 把圖片設置為50%的透明度 */ } /* 5.設置濾鏡 */ img { filter: grayscale(100%); /* 把圖片變成灰色 */ }
除了以上幾種方法,還有很多其他的CSS對圖片的處理方法。使用CSS對圖片進行處理,能夠提高頁面的美觀度和用戶體驗,是Web開發中必不可少的技能之一。