style - قم بتحويل صورة إلى تدرج الرمادي في HTML/CSS



div border html (18)

هل هناك طريقة بسيطة لعرض صورة نقطية ملونة بتدرج الرمادي باستخدام HTML/CSS فقط؟

لا تحتاج إلى أن تكون متوافقة مع IE (وأتصور أنها لن تكون) - إذا كانت تعمل في FF3 و / أو Sf3 ، فهذا جيد بما فيه الكفاية بالنسبة لي.

أعلم أنه يمكنني فعل ذلك باستخدام SVG و Canvas على حد سواء ، ولكن يبدو هذا كثيرًا من العمل في الوقت الحالي.

هل هناك طريقة شخص كسول حقًا للقيام بذلك؟

https://code.i-harness.com


أبسط طريقة لتحقيق تدرج الرمادي مع CSS حصرا هو عن طريق خاصية filter .

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

لا يزال الموقع غير مدعوم بالكامل ولا يزال يتطلب خاصية -webkit-filter للدعم عبر جميع المتصفحات.


إذا كنت أنت أو شخصًا آخر يواجه مشكلة مماثلة في المستقبل ، فبإمكانك فتح صفحة PHP. (أعلم أنك قلت HTML / CSS ، ولكن ربما كنت تستخدم بالفعل PHP في الخلفية) هنا هو حل PHP:

حصلت عليه من مكتبة PHP GD وإضافة بعض المتغيرات لأتمتة العملية ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

إذا كنت قادرًا على استخدام JavaScript ، فقد يكون هذا البرنامج النصي هو ما تبحث عنه. يعمل المتصفح المتقاطع ويعمل بشكل جيد بالنسبة لي حتى الآن. لا يمكنك استخدامه مع الصور المحملة من مجال مختلف.

http://james.padolsey.com/demos/grayscale/


إليك مزيج لـ LESS يتيح لك اختيار أي تعتيم. املأ المتغيرات بنفسك للحصول على CSS عادي بنسب مئوية مختلفة.

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

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

ثم استخدمها:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

بالنسبة إلى متصفح Firefox ، لست بحاجة إلى إنشاء ملف filter.svg ، يمكنك استخدام مخطط URI للبيانات .

إن أخذ رمز css الخاص بالإجابة الأولى يعطي:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

احرص على استبدال سلسلة "utf-8" بترميز ملفك.

يجب أن تكون هذه الطريقة أسرع من الأخرى لأن المتصفح لن يحتاج إلى إجراء طلب HTTP الثاني.


بالنسبة للأشخاص الذين يسألون عن دعم IE10 المتجاهل في إجابات أخرى ، قم بالخروج من هذا الجزء من CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

تُطبق على هذا الترميز:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

لمزيد من العروض التوضيحية ، قم بالاطلاع على قسم رسومات CSS3 الخاص بـ IE testdrive و مدونة IE القديمة هذه http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx


تم توفير طريقة جديدة للقيام بذلك لبعض الوقت الآن على المتصفحات الحديثة.

يتيح لك وضع الخلفية - المزيج الحصول على بعض التأثيرات المثيرة ، وأحدها هو التحويل الرمادي

تسمح لمعان القيمة ، المحدد على خلفية بيضاء ، بذلك. (تحوم لرؤيتها باللون الرمادي)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}
<div class="test"></div>

يتم أخذ اللمعان من الصورة ، يتم أخذ اللون من الخلفية. لأنها بيضاء دائما ، لا يوجد لون.

لكنه يسمح أكثر من ذلك بكثير.

يمكنك تحريك إعداد التأثير 3 طبقات. ستكون الصورة الأولى هي الصورة ، والثانية ستكون تدرج أبيض أسود. إذا قمت بتطبيق صيغة blend blend على هذا ، ستحصل على نتيجة بيضاء كما كان من قبل على الجزء الأبيض ، لكن الصورة الأصلية على الجزء الأسود (تضرب باللون الأبيض تعطي اللون الأبيض ، المضرب باللون الأسود ليس له تأثير).

على الجزء الأبيض من التدرج ، تحصل على نفس التأثير كما كان من قبل. على الجزء الأسود من التدرج ، تقوم بمزج الصورة على نفسه ، والنتيجة هي الصورة غير المعدلة.

الآن ، كل ما هو مطلوب هو تحريك التدرج للحصول على ديناميكية التأثير هذه (تحوم لرؤيتها بالألوان)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>

reference

مصفوفة التوافق


تمت إضافة دعم لفلترات CSS الأصلية في webkit من الإصدار الحالي 19.0.1084.46

لذلك -webkit مرشح: سوف تعمل الرمادي (1) والذي هو أسهل من نهج SVG ل webkit ...


حل واحد فظيع ولكن عملي: تقديم الصورة باستخدام كائن Flash ، والذي يمنحك جميع التحويلات الممكنة في Flash.

إذا كان مستخدموك يستخدمون متصفحات النزيف وما إذا كان فايرفوكس 3.5 و Safari 4 يدعمون ذلك (لا أعلم أن ذلك سيحدث أم لا) ، فبإمكانك ضبط سمة ملف تعريف ألوان الصورة في CSS ، وتعيينها إلى ICC بتدرج رمادي. URL الملف الشخصي. ولكن هذا كثير من!


ربما هذه الطريقة تساعدك

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org


في Internet Explorer ، استخدم خاصية التصفية.

في webkit و Firefox لا يوجد حاليا أي طريقة desatuarte صورة فقط مع CSS. لذا ستحتاج إلى استخدام إما قماش أو SVG لحل من جانب العميل.

لكنني أعتقد أن استخدام SVG أكثر أناقة. تحقق من مشاركة المدونة الخاصة بي لحل SVG الذي يعمل لكل من Firefox و webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

وبصرامة منذ SVG هي HTML الحل هو النقي HTML + CSS :-)


في الواقع ، من الأسهل القيام بذلك باستخدام IE إذا كنت أتذكر استخدام خاصية CSS خاصة بشكل صحيح. جرب هذا FILTER: Gray من http://www.ssi-developer.net/css/visual-filters.shtml

تجعل الطريقة بواسطة Ax ببساطة الصورة شفافة ولها خلفية سوداء خلفها. أنا متأكد من أنك يمكن أن يجادل هذا هو الرمادي.

على الرغم من أنك لا تريد استخدام جافا سكريبت ، إلا أنه يجب عليك استخدامه. يمكنك أيضًا استخدام لغة خادم جانبي للقيام بذلك.


لا تحتاج إلى استخدام العديد من البادئات للاستخدام الكامل ، لأنه إذا اخترت البادئة لفايرفوكس القديم ، فلا تحتاج إلى استخدام البادئة لفايرفوكس جديد.

لذلك ، للاستخدام الكامل ، استخدم هذا الكود بشكل كافي:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

لا يبدو أنه من الممكن (حتى الآن) ، حتى مع CSS3 أو -webkit- الملكية -webkit- أو -moz- CSS.

ومع ذلك ، فقد عثرت على هذه المشاركة منذ حزيران (يونيو) الماضي والتي استخدمت فلاتر SVG على HTML. غير متوفر في أي متصفح حالي (يُلمح العرض إلى بنية WebKit مخصصة) ، ولكنه مثير للإعجاب كإثبات للمفهوم.


يمكن استخدام بديل للمتصفح الأقدم لاستخدام قناع ينتج بواسطة عناصر زائفة أو علامات مضمنة.

يتحكم الوضع المطلق في img (أو منطقة النص التي لا تحتاج إلى نقرة أو تحديد) يمكن أن تحاكي بشكل دقيق تأثيرات مقياس الألوان ، عبر rgba () أو png .

لن يعطي مقياسًا واحدًا للألوان ، ولكن سيظل لونه خارج النطاق.

اختبار على رمز القلم مع 10 ألوان مختلفة عبر عنصر زائف ، آخر هو الرمادي. http://codepen.io/gcyrillus/pen/nqpDd (أعد التحميل للتبديل إلى صورة أخرى)



تحديث: لقد صنعت هذا إلى إصدار GitHub كامل ، بما في ذلك جافا سكريبت بوليفار لـ IE10 و IE11: gray

استخدمت في الأصل جواب سلمان بك ، ولكن بعد ذلك قمت بإنشاء التباين أدناه للقضاء على طلب HTTP الإضافي المطلوب لملف SVG. يعمل SVG المضمّن في إصدارات 10 من فَيَرفُكس والإصدارات الأحدث ، كما أن الإصدارات الأقل من 10 لم تعد تمثل حتى 1٪ من سوق المستعرضات العالمي.

ومنذ ذلك الحين ، حافظت على تحديث الحل في هذا التدوينة في المدونة ، مع إضافة دعم لتلاشي اللون ، ودعم IE 10/11 باستخدام SVG ، وتدرج الرمادي الجزئي في العرض التوضيحي.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}




grayscale