imej CSS


Bab ini akan memperkenalkan cara menggunakan CSS untuk susun atur imej.

Imej Sudut Bulat

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 8px;
}
</style>
</head>
<body>

<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Run Instance»

Klik "Run Butang " Instance" untuk melihat contoh dalam talian

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border-radius: 50%;
}
</style>
</head>
<body>

<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Jalankan instance»

Klik " Butang Run instance" Lihat contoh dalam talian

Lakaran kenit

Kami menggunakan atribut border untuk mencipta lakaran kenit.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
</style>
</head>
<body>

<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>

<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>

<a target="_blank" href="paris.jpg">
  <img src="paris.jpg" alt="Paris" width="400" height="300">
</a>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Imej responsif

Imej responsif akan menyesuaikan diri secara automatik kepada pelbagai saiz skrin.

Dalam contoh, anda boleh menyemak kesannya dengan menetapkan semula saiz penyemak imbas:

Norway

Jika anda perlu menskala imej secara bebas dan saiz yang diperbesarkan imej tidak lebih besar daripada saiznya Nilai maksimum asal, anda boleh menggunakan kod berikut:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>

<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>

<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" " untuk melihat contoh dalam talian

Petua: Untuk mendapatkan maklumat lanjut tentang reka bentuk responsif Web, sila rujuk tutorial reka bentuk responsif CSS.

Teks imej

Cara meletakkan teks imej:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>图片文本</h2>
<p>在图片左上角添加文本信息:</p>

<div class="container">
  <img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">左上角</div>
</div>

</body>
</html>

Jalankan contoh »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian


Instance

rreee

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.container {
    position: relative;
}

.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>图片文本</h2>
<p>在图片右上角添加文本信息:</p>

<div class="container">
  <img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topright">右上角</div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.container {
    position: relative;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>图片文本</h2>
<p>在图片左下角添加文本信息:</p>

<div class="container">
  <img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="bottomleft">左下角</div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.container {
    position: relative;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>图片文本</h2>
<p>在图片右下角添加文本信息:</p>

<div class="container">
  <img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="bottomright">右下角</div>
</div>

</body>
</html>

Jalankan instance»

Klik butang "Run instance" untuk melihat instance dalam talian

Gambar gaya kad

Instance 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>图片文本</h2>
<p>在图片中间位置添加文本信息:</p>

<div class="container">
  <img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="center">居中</div>
</div>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Gambar penapis

CSS filter sifat digunakan untuk menambah kesan visual (seperti kabur dan tepu) pada elemen.

Nota: Atribut ini tidak disokong oleh Internet Explorer atau Safari 5.1 (dan lebih awal).

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {margin:25px;}

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>响应式卡片</h2>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>

<div class="polaroid">
  <img src="lights600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Northern Lights in Norway</p>
  </div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Petua: Lawati Manual Rujukan Penapis CSS untuk mendapatkan maklumat lanjut.

Album gambar responsif

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img {
    width: 33%;
    height: auto;
    float: left; 
    max-width: 235px;
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

Run instance»

Click" Run Butang Contoh" untuk melihat contoh dalam talian

Modal Imej (modal)

Contoh ini menunjukkan cara menggabungkan CSS dan JavaScript untuk memaparkan imej bersama-sama.

Pertama, kami menggunakan CSS untuk mencipta tetingkap modal (dialog), yang disembunyikan secara lalai.

Kemudian, kami menggunakan JavaScript untuk memaparkan tetingkap modal Apabila kami mengklik pada imej, imej akan dipaparkan dalam tetingkap timbul:

Contoh

<. 🎜>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="http://www.php.cn/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="http://www.php.cn/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="http://www.php.cn/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="http://www.php.cn/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>

Jalankan contoh»Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

←
→