色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css讓圖片上打表格

CSS
林子帆2年前7瀏覽0評論

CSS是用來美化和裝飾網頁的語言，其中一個功能就是讓圖片上打表格。在本文中，我們將會探討如何使用CSS讓圖片上打表格。

在開始之前，我們先需要一張圖片作為我們的基礎。以下是我們即將使用的圖片：

table image

我們首先需要建立HTML文件：

<!DOCTYPE html>
<html>
<head>
	<title>CSS讓圖片上打表格</title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<img src="https://cdn.pixabay.com/photo/2015/06/25/15/04/table-821718_960_720.jpg" alt="table image" class="table">
</body>
</html>

現在我們需要創建CSS文件，然后定義樣式表：

.table {
	position: relative;
}
.table:before {
	content: "";
	position: absolute;
	top: 150px;
	left: 50px;
	width: 320px;
	height: 200px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
}
td {
	border: 1px solid black;
	padding: 5px;
	background-color: white;
}
tr:first-child td {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	position: absolute;
	top: 170px;
	left: 65px;
	z-index: 2;
}

我們在這里定義了兩個偽元素，一個是.table:before，這個會創建一個白色背景塊，用來放置我們的表格；另一個是table元素，用來定義真正的表格樣式。

其中，我們還定義了單元格的邊框和內邊距，以及表格的邊框和字體加粗樣式。

最后，我們可以看到效果，以及完整的HTML和CSS代碼：

<!DOCTYPE html>
<html>
<head>
	<title>CSS讓圖片上打表格</title>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<img src="https://cdn.pixabay.com/photo/2015/06/25/15/04/table-821718_960_720.jpg" alt="table image" class="table">
	<table>
<tr>
<td>類型</td>
<td>屬性</td>
<td>描述</td>
</tr>
<tr>
<td>position</td>
<td>relative, absolute, fixed</td>
<td>定義元素的位置方式</td>
</tr>
<tr>
<td>background-color</td>
<td>color code</td>
<td>定義背景顏色</td>
</tr>
	</table>
</body>
</html>
.table {
	position: relative;
}
.table:before {
	content: "";
	position: absolute;
	top: 150px;
	left: 50px;
	width: 320px;
	height: 200px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
}
td {
	border: 1px solid black;
	padding: 5px;
	background-color: white;
}
tr:first-child td {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	position: absolute;
	top: 170px;
	left: 65px;
	z-index: 2;
}