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 中学习关于响应式 Web 设计的更多知识。

居中图像

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

Coffee

مثال

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

جرب بنفسك

صور بوليراي / بطاقات

Tulip

الزهور الصفراء

Tulip

الزهور الحمراء

مثال

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 مرشحات تضيف خاصية الأنماط تأثيرات بصرية (مثل الحجب والسعة) إلى العنصر.

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

مثال

قم بتغيير لون جميع الصور إلى أبيض وأسود (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 لإنشاء مكتبة صور متكيفة.

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

مثال

.متجاوبة {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .متجاوبة {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .متجاوبة {
    عرض: 100%;
  }
}

جرب بنفسك

نصيحة:يرجى زيارة دليل CSS RWD تعلم المزيد عن تصميم المواقع المدمجة في هذا الموقع.

نافذة منبثقة للصور (Image Modal)

هذا مثال على كيفية عمل CSS وJavaScript معًا.

أولاً، قم بإنشاء نافذة منبثقة باستخدام CSS (نافذة حوار) واخفيها بشكل افتراضي.

ثم، عند النقر على الصورة باستخدام JavaScript، يتم عرض نافذة منبثقة ويتم عرض الصورة داخلها:

绿茵场

جرب بنفسك