資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚
法律學習如何使用 CSS 建立一個粘性圖片？
在網頁上，您可能看到了一個定位在頂部的粘性選單。有了它，粘性元素也可以置於網頁上。此外，使用 position 屬性，我們還可以讓一張影像變成粘性的，這樣的話，即使網頁滾動，影像也會始終粘在頁面上。讓我們看看如何使用 HTML 和 CSS 建立一個粘性影像。
設定影像
使用 <img> 元素在網頁上放置一張圖片 −
<img src="https://tutorialspoint.tw/data_structures_algorithms/images/data-structure-mini-logo.jpg">
新增一些文字，顯示捲軸
在影像後放置一些文字，以顯示捲軸。我們已經添加了一些隨機標題和文字 −
<p>Scroll down to see the effect</p> <h2>With Examples</h2> <h2>With Assignments</h2> <h2>With Codes</h2> <p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p>
使影像定位為粘性
使用 position 屬性，並將其值設定為 sticky，以定點陣圖像。要將其置於頂部，請使用 top 屬性，將其值設定為 0
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
示例
以下程式碼用於建立一張粘性影像 CSS −
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Data Structures</h1>
<img src="https://tutorialspoint.tw/data_structures_algorithms/images/data-structure-mini-logo.jpg">
<p>Scroll down to see the effect</p>
<h2>With Examples</h2>
<h2>With Assignments</h2>
<h2>With Codes</h2>
<p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p>
</body>
</html>
更新於:14-12-2023
2K+ 瀏覽量
廣告