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




style div (22)

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

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

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

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


Answers

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

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

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

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


في 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 :-)


فقط حصلت على نفس المشكلة اليوم. لقد استعملت في البداية حل SalmanPK لكني وجدت أن التأثير يختلف بين FF والمتصفحات الأخرى. ذلك لأن مصفوفة التحويل تعمل على الإضاءة فقط وليس لمعان مثل الفلاتر في Chrome / IE. لدهشتي ، اكتشفت أن الحل البديل والأبسط في SVG يعمل أيضًا في FF4 + وينتج نتائج أفضل:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

باستخدام css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

هناك تحذير واحد آخر وهو أن IE10 لا يدعم "الفلتر: الرمادي:" في وضع المعايير المتوافق بعد الآن ، لذا يحتاج إلى وضع التوافق في الرؤوس للعمل:

<meta http-equiv="X-UA-Compatible" content="IE=9" />


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

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


بعد الحصول على إجابة brillout.com ، وكذلك إجابة Roman Nurik ، والاسترخاء إلى حد ما لمتطلبات "no SVG" ، يمكنك إلغاء تشويه الصور في Firefox باستخدام ملف SVG واحد فقط وبعض CSS.

سيبدو ملف SVG كما يلي:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

حفظ ذلك كملف resources.svg ، يمكن إعادة استخدامه من الآن فصاعدًا لأي صورة تريد تغييرها إلى تدرج رمادي.

في CSS الخاص بك ، يمكنك الرجوع إلى عامل التصفية باستخدام خاصية filter الخاصة بـ Firefox:

.target {
    filter: url(resources.svg#desaturate);
}

أضِف امتيازات MS الخاصة أيضًا إذا كنت ترغب في ذلك ، طبّق هذا الصف على أي صورة تريد تحويلها إلى تدرج الرمادي (يعمل في Firefox> 3.5 ، IE8) .

تحرير : إليك مشاركة مدونة رائعة تصف استخدام خاصية filter CSS3 الجديدة في إجابة SalmanPK بالتنسيق مع نهج SVG الموضح هنا. باستخدام هذا النهج ، ستنتهي بشيء مثل:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

مزيد من معلومات دعم المتصفح هنا .


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

$("#myImageID").tancolor();

هناك demo تفاعلي. يمكنك اللعب بها.

تحقق من الوثائق على الاستخدام ، انها بسيطة جدا. docs


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

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

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

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

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


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

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


للحصول على تدرج الرمادي كنسبة مئوية في Firefox ، استخدم فلتر saturate بدلاً من ذلك: (ابحث عن "saturate")

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

تحديث: لقد صنعت هذا إلى إصدار 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%);
}

إذا كنت أنت أو شخصًا آخر يواجه مشكلة مماثلة في المستقبل ، فبإمكانك فتح صفحة 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);

?>

بالنسبة إلى متصفح 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 الثاني.


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

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

w3schools.org


بالنسبة للأشخاص الذين يسألون عن دعم 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


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

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

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


إذا كنت على استعداد لاستخدام Javascript ، فيمكنك استخدام لوحة قماشية لتحويل الصورة إلى تدرج الرمادي. بما أن Firefox و Safari يدعمان <canvas> ، يجب أن يعمل.

لذلك أنا googled "قماش رمادي تدريجي" ، وكانت النتيجة الأولى http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html التي يبدو أنها تعمل.


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

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


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

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

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

.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. لذلك لدينا الآن حل عبر المتصفح.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
<img src="http://lorempixel.com/400/200/">

ماذا عن إنترنت إكسبلورر 10؟

يمكنك استخدام polyfill مثل gray .


أقرب ما يمكنني الحصول عليه:

$(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});
body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

العرض التوضيحي: http://jsfiddle.net/9wxfY/2/

هيريس نسخة تستخدم فقط مسافة واحدة: http://jsfiddle.net/9wxfY/4/







css image css3 grayscale