CSS 圖片左右漸變隱藏 您是否有過想要在網頁中隱藏一些圖片的需求？CSS 提供了一種簡單的方式來實現圖片的左右漸變隱藏效果。下面我們將詳細介紹如何使用 CSS 實現這種效果。 首先，我們需要將圖片包裹在一個容器中。在容器中，設置如下 CSS 屬性： ```CSS .container { overflow: hidden; position: relative; } .container img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; } ``` 上述 CSS 屬性設置了容器的 overflow 屬性為 hidden，這意味著任何溢出容器的內容將被隱藏。容器還設置了 position: relative 屬性，這是為了保證其子元素（即圖片）的絕對定位相對于容器。 圖片本身被設置為絕對定位，同時通過設置 top，bottom，left，right 屬性為 0，讓其覆蓋整個容器，使得圖片能夠被完全放置在容器中心。同時，我們通過設置 margin: auto 和 max-width: 100% 屬性，讓圖片自適應容器大小。 接著，我們添加一個偽元素 before 來實現漸變遮罩效果。在容器中添加如下 CSS 代碼： ```CSS .container:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), white); } ``` 上述 CSS 代碼添加了一個偽元素 before，其內容為空字符串。該元素被絕對定位，并覆蓋整個容器。z-index 屬性為 1，比圖片（z-index 默認為 0）更靠上層，以便實現遮罩效果。 background 屬性設置了一個朝右的線性漸變，從透明到白色。由于偽元素在容器頂層，因此遮罩將被漸變覆蓋，最終遮罩的效果左右漸變隱藏圖片。 以上就是 CSS 圖片左右漸變隱藏的實現方法。希望這篇文章對您有所幫助。