CSS 设置图像样式

学习如何使用 CSS 设置图像样式。

圆角图像

使用 border-radius 属性创建圆形图像：

مثال

圆角图像:

img {
  border-radius: 8px;
}

亲自试一试

مثال

圆形图像：

img {
  border-radius: 50%;
}

亲自试一试

缩略图图像

使用 border 属性创建缩略图。

缩略图：

Coffee

مثال

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

亲自试一试

作为链接的缩略图：

مثال

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

亲自试一试

响应式图像

响应式图像会自动调整以适合屏幕尺寸。

如果您希望根据需要缩小图像，但需要杜绝放大到大于原始尺寸，请添加如下代码：

مثال

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

提示：在我们的 CSS RWD 教程 在kaɗa taɗa ɗaraja ƙarfi game da ƙirƙira ƙarƙaɗa Web.

居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

Coffee

مثال

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

亲自试一试

Baoli laa tashe / kaɗa

Tulip

kaɗa biliyi

Tulip

kaɗa taɗa

مثال

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);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

亲自试一试

صورة شفافة

شفافية مجال القيمة الخاص بالخاصية هو 0.0 - 1.0. القيمة الأدنى، الشفافية أعلى:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (الافتراضي)

مثال

img {
  opacity: 0.5;
}

亲自试一试

نص الصورة

كيفية تحديد موقع النص في الصورة:

مثال

CodeW3C.com Logo
الجزء السفلي اليسرى
الجزء العلوي اليسرى
الجزء العلوي الأيمن
الجزء السفلي الأيمن
منتصف

جرب بنفسك:

الجزء العلوي اليسرى الجزء العلوي الأيمن الجزء السفلي اليسرى الجزء السفلي الأيمن منتصف

مرشحات الصور

CSS مرشح الخاصية تضيف تأثيرات بصرية (مثل الغموض والتباين) إلى العنصر.

ملاحظة:Internet Explorer أو Edge 12 لا يدعم خاصية filter.

مثال

تغيير لون جميع الصور إلى أسود وأبيض (100% رمادي):

img {
  filter: grayscale(100%);
}

亲自试一试

提示：يرجى زيارة دليل مرشحات CSS، للحصول على معلومات إضافية عن مرشحات CSS.

الإضافة عند وضع المؤشر بالفأرة على الصورة

إنشاء تأثير إضافي عند وضع المؤشر بالفأرة:

مثال 1

نص التدرج:

Avatar
مرحبًا بالعالم

亲自试一试

مثال 2

مربع التدرج:

Avatar
بيل

亲自试一试

مثال 3

السحب إلى الأعلى:

Avatar
مرحبًا بالعالم

亲自试一试

مثال 4

السحب إلى الأسفل:

Avatar
مرحبًا بالعالم

亲自试一试

مثال 5

السحب إلى اليسار:

Avatar
مرحبًا بالعالم

亲自试一试

مثال 6

السحب إلى اليمين:

Avatar
مرحبًا بالعالم

亲自试一试

تدوير الصورة

انقل مؤشر الفأرة إلى الصورة:

体育公园

مثال

img:hover {
  transform: scaleX(-1);
}

亲自试一试

مكتبة صور مرونة

يمكننا استخدام CSS لإنشاء مكتبة صور متكيفة.

هذا المثال يستخدم استعلامات وسائل الاعلام لإعادة ترتيب الصور بناءً على حجم الشاشة المختلفة. قم بتغيير حجم نافذة المتصفح لرؤية التأثير:

مثال

.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%;
  }
}

亲自试一试

提示：请在我们的 CSS RWD 教程 中学习有关响应式 Web 设计的更多知识。

图像模态（Image Modal）

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用 JavaScript 显示模态窗口并在模态内部显示图像：

绿茵场

亲自试一试