it-swarm.dev

تغميق صورة الخلفية على التحويم

كيف يمكنني تغميق صورة خلفية على التحويم دون جعل أغمق جديد صورة؟

CSS:

.image {
  background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
  width: 58px;
  height: 58px;
}

رابط JSFiddle: http://jsfiddle.net/qrmqM/1/

36
John Smith

ماذا عن هذا ، باستخدام تراكب؟

.image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

تجريبي

38
PSL

مماثلة ، ولكن مرة أخرى مختلفة قليلا.

اجعل الصورة عتامة 100٪ بحيث تكون واضحة. ثم قم بتحريكه على img إلى العتامة التي تريدها. في هذا المثال ، أضفت أيضًا تسهيلًا لعملية انتقال لطيفة.

img {
    -webkit-filter: brightness(100%);
}

img:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

سوف تفعل ذلك ، نأمل أن يساعد.

شكرًا لك Robert Byers على jsfiddle

45
Sabba Keynejad

إذا كنت تريد تغميق الصورة ، استخدم عنصر تراكب مع rgba و opacity الخصائص التي ستغمق صورتك ...

عرض توضيحي

<div><span></span></div>

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div span {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover span {
    opacity: 1;
}

ملاحظة: أنا أيضا باستخدام التحولات CSS3 لتأثير الظلام على نحو سلس


إذا قام أي شخص بحفظ عنصر إضافي في DOM مما يمكنك استخدامه :before أو :after الزائفة كذلك ..

العرض التوضيحي 2

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
}

div:hover:after {
    opacity: 1;
}

استخدام بعض المحتوى على التراكب الغامق للصورة

أنا هنا باستخدام تقنيات CSS Positioning مع z-index لتراكب المحتوى على العنصر المظلم div. العرض التوضيحي 3

div {
    background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
    height: 400px;
    width: 400px;
    position: relative;
}

div:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    top: 0;
    left: 0;
    position: absolute;
}

div:hover:after {
    opacity: 1;
}

div p {
    color: #fff;
    z-index: 1;
    position: relative;
}
16
Mr. Alien

يمكنك استخدام التعتيم :

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.5;
}

.image:hover{
    opacity:1;
}

JSFiddle

7
Vucko

جرب الكود التالي:

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.2;
}

.image:hover{
    opacity:1;
}
2
enam

أضف المغلق:

.image{
    opacity:.5;
}

.image:hover{
    // CSS properties
    opacity:1;
}
2
Mohit Bhansali

جرب هذا

http://jsfiddle.net/qrmqM/6/

CSS

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
      opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;

    border-radius:100px;
  opacity:1;
            filter:alpha(opacity=100);

}

HTML

<div class="image"></div>
2
Falguni Panchal

إن أبسط طريقة للقيام بذلك دون إضافة عنصر تراكب إضافي ، أو استخدام صورتين ، هي استخدام: قبل أو: بعد المحدد.

.image {
    position: relative;
}
.image:hover:after {
    content: ""; 
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    top: 0;
    left:0;
}

هذا لن ينجح في المتصفحات القديمة بالطبع. فقط أقول أنه يحط برشاقة!

1
machinat
.image:hover {
   background: #000;
    width: 58px;
    height: 58px;
    border-radius:60px;

}

سوف تحصل على تغميق

1
Praveen

يمكنك استخدام هذا:

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

كما نشاهد في: https://stackoverflow.com/a/24084708/8953378

0
Alon Gouldman

أود إضافة div حول الصورة وإجراء تغيير في عتامة الصورة على التحويم وإضافة ظل صندوق داخلي إلى div على التحويم.

img:hover{
    opacity:.5;
}
.image:hover{
    box-shadow: inset 10px 10px 100px 100px #000;
}

<div class="image"><img src="image.jpg" /></div>
0
daniella

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

تتمثل أفضل طريقة في إنشاء صورتين وإضافة ما يلي:

.image {
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png');
    width: 58px;
    height: 58px;
    opacity:0.9;   
}
.image:hover{
    background: url('http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png');
}
}
0
Roy M J