html - w3school - هل من الممكن ضبط مكافئ لسمة src لعلامة img في CSS؟




img html (16)

مجموعة من الطرق الممكنة لتعيين الصور من CSS

CSS2 's :after pseudo-element أو the newer syntax ::after from CSS3 with the content: property:

التوصية W3C الأولى: أوراق الأنماط المتتالية ، المستوى 2 من مواصفات CSS2 12 مايو 1998
آخر توصية W3C: الاختيارات المستوى 3 W3C التوصية 29 سبتمبر 2011

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

ملاحظة: تعرض بعض المتصفحات content بشكل تجريبي على بعض محددات العناصر متجاهلة حتى آخر توصية W3C التي تحدد:

ينطبق على:: :before و :after pseudo-elements

بناء CSS2 (متوافق مع الإصدارات المتقدمة):

.myClass:after {
  content: url("somepicture.jpg");
}

CSS3 المختار:

.myClass::after {
  content: url("somepicture.jpg");
}

التقديم الافتراضي: الحجم الأصلي (لا يعتمد على إعلان الحجم الصريح)

لا تحدد هذه المواصفة بشكل كامل تفاعل: من قبل و: بعد استبدال العناصر (مثل IMG في HTML). سيتم تعريف هذا بمزيد من التفاصيل في مواصفات مستقبلية.

ولكن حتى في وقت كتابة هذه السطور ، لا يزال السلوك مع <IMG> غير محدد ، وعلى الرغم من أنه يمكن استخدامه بطريقة متوافقة مع الاختراق وغير المعايير ، لا ينصح باستخدام <img> !

طريقة المرشح العظيم ، راجع الاستنتاجات ...

background-image: لـ CSS1 background-image: property:

W3C First Recommendation: Cascading Style Sheets، level 1 17 Dec 1996

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

هذه الخاصية كانت موجودة منذ بداية CSS ومع ذلك فهي تستحق ذكرًا مجيدًا.

التقديم الافتراضي: الحجم الأصلي (لا يمكن تغيير حجمه ، وضعه فقط)

ومع ذلك ،

background-size: CSS3 background-size: تحسين الخاصية عليه عن طريق السماح بخيارات التحجيم المتعددة:

آخر حالة W3C: توصية المرشح CSS Backgrounds and Border الوحدة النمطية 3 9 سبتمبر 2014

[length> | <percentage> | auto ]{1,2} | cover | contain

ولكن حتى مع هذه الخاصية ، يعتمد ذلك على حجم الحاوية.

لا تزال طريقة جيدة للمرشح ، راجع الاستنتاجات ...

list-style: CSS2 list-style: الخاصية جنبا إلى جنب مع display: list-item :

التوصية W3C الأولى: أوراق الأنماط المتتالية ، المستوى 2 من مواصفات CSS2 12 مايو 1998

list-style-image: الخاصية تحدد الصورة التي سيتم استخدامها كعلامة عنصر قائمة (bullet)

تصف خصائص القائمة التنسيق البصري الأساسي للقوائم: تسمح لأوراق الأنماط بتحديد نوع العلامة ( صورة ، حرف رسومي ، أو رقم)

display: list-item - تؤدي هذه القيمة إلى عنصر (على سبيل المثال ، <li> في HTML) لإنشاء مربع كتلة رئيسي ومربع علامة.

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

اختصار CSS: ( <list-style-type> <list-style-position> <list-style-image> )

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

التقديم الافتراضي: الحجم الأصلي (لا يعتمد على إعلان الحجم الصريح)

قيود:

  • سيقوم الوراثة بنقل قيم "نمط القائمة" من عناصر OL و UL إلى عناصر LI. هذه هي الطريقة الموصى بها لتحديد معلومات نمط القائمة.

  • لا تسمح للمؤلفين بتحديد نمط مميز (ألوان ، خطوط ، محاذاة ، إلخ) من أجل محدد القائمة أو تعديل موضعه

هذه الطريقة أيضًا ليست مناسبة للعلامة <img> لأن التحويل لا يمكن إجراؤه بين أنواع العناصر ، وهنا الاختراق المحدود غير المتوافق الذي لا يعمل على Chrome.

طريقة المرشح الجيد ، راجع الاستنتاجات ...

border-image: CSS3 border-image: توصية الملكية:

آخر حالة W3C: توصية المرشح CSS Backgrounds and Border الوحدة النمطية 3 9 سبتمبر 2014

طريقة من نوع الخلفية تعتمد على تحديد الأحجام بطريقة غريبة إلى حد ما (غير محددة لحالة الاستخدام هذه) وخصائص الحدود الاحتياطية حتى الآن (على سبيل المثال. border: solid ):

لاحظ أنه ، على الرغم من أنها لا تسبب أبدًا آلية تمرير ، فقد لا يزال يتم قطع الصور الأولية من قبل سلف أو من خلال إطار العرض.

يوضح هذا المثال الصورة التي يتم تكوينها فقط كزخرفة ركنية في أسفل اليمين:

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

ينطبق على: جميع العناصر ، باستثناء عناصر الجدول الداخلي عند border-collapse: collapse

لا يزال لا يمكن تغيير العلامة <img> src (ولكن هنا الاختراق ) ، بدلاً من ذلك يمكننا تزيينها:

.myClass {
    border: solid;
    border-width: 0 96px 96px 0;
    border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0;
}
<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"

أسلوب المرشح الجيد الذي يجب مراعاته بعد نشر المعايير.

مشروع CSS3 's element() مسودة العمل الترميزية يستحق الذكر أيضا:

ملاحظة: تقوم الدالة element() بإعادة إنتاج مظهر العنصر المشار إليه فقط ، وليس المحتوى الفعلي وبنيته.

<div id="img1"></div>

<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

سنستخدم المحتويات التي تم تقديمها لإحدى الصورتين #img1 لتغيير خلفية الصورة في #img1 استنادًا إلى محدد الهوية عبر CSS:

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

ملاحظات: إنه تجريبي ويعمل فقط مع البادئة -moz في Firefox -moz background أو background-image فقط فقط ، كما يحتاج إلى أحجام محددة.

الاستنتاجات

  1. أي محتوى محتوى أو معلومات بنيوية ينتقل في HTML.
  2. يتم تقديم معلومات التصميم والعروض التقديمية في CSS.
  3. لأغراض تحسين محركات البحث ، لا تخفي الصور ذات المغزى في CSS.
  4. يتم عادةً تعطيل رسومات الخلفية عند الطباعة.
  5. يمكن استخدام العلامات المخصصة وتنسيقها من CSS ، لكن الإصدارات الأولية من Internet Explorer لا تفهم بدون إرشادات جافا سكريبت أو CSS.
  6. تطبيقات SPA (تطبيق صفحة واحدة) ، حسب التصميم ، عادةً ما تتضمن الصور في الخلفية

بعد قولي هذا ، دعنا نستكشف علامات HTML الملائمة لعرض الصور:

عنصر <li> [HTML4.01 +]

مثالي usecase للصورة list-style-image مع display: list-item طريقة display: list-item .

يمكن أن يكون العنصر <li> فارغًا ، ويسمح بمحتوى التدفق بل ويسمح بحذف علامة النهاية </li> .

.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
    <li id="img1">movie</li>
    <li id="img2">earth</li>
    <li id="img3">kiwi</li>
</ul>

القيود: من الصعب الوصول إلى الأسلوب ( width: أو float: قد يساعد)

عنصر <figure> [HTML5 +]

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

يكون العنصر صالحًا بدون أي محتوى ، ولكن يُنصح أن يحتوي على <figcaption> .

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

التقديم الافتراضي: يتم محاذاة العنصر إلى اليمين ، مع كل من الحشو الأيسر والأيمن!

عنصر <object> [HTML4 +]

لتضمين الصور ، قد يستخدم المؤلفون عنصر OBJECT أو عنصر IMG.

سمة data مطلوبة ويمكن أن تحتوي على نوع MIME صالح كقيمة!

<object data="data:x-image/x,"></object>

ملاحظة: قد تكون الخدعة التي تستخدم العلامة <object> من CSS هي تعيين MimeType x-image/x صالحًا متبوعًا بلا بيانات (القيمة لا تحتوي على بيانات بعد الفاصلة المطلوبة , )

العرض الافتراضي: 300 × 150 بكسل ، ولكن يمكن تحديد الحجم سواء في HTML أو CSS.

العلامة <SVG>

يحتاج إلى متصفح SVG قادر ولديه عنصر <image> للصور النقطية

عنصر <canvas> [HTML5 +].

يتم تعيين سمة width إلى 300 افتراضيًا ، ويتم تعيين السمة height افتراضيًا إلى 150 .

عنصر <input> مع type="image"

محددات:

... من المتوقع أن يظهر العنصر على شكل زر للإشارة إلى أن العنصر عبارة عن زر.

الذي يتبعه Chrome ويعرض مربع فارغ بحجم 4x4 بكسل عند عدم وجود نص

الحل الجزئي ، value=" " المحددة value=" " :

<input type="image" id="img1" value=" ">

احترس أيضًا من عنصر <picture> القادم في HTML5.1 ، وهو مسودة العمل حاليًا.

هل من الممكن لتعيين قيمة السمة src في CSS؟ في الوقت الحاضر ، ما أقوم به iI هو:

<img src="pathTo/myImage.jpg"/>

وأريد أن يكون شيء من هذا القبيل

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

أريد القيام بذلك دون استخدام background أو background-image: الخصائص في CSS.


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

لذا ، فإن أيًا من الإجابات التي تقدم طريقة للقيام بذلك باستخدام علامة img لا تستخدم السمة src تروج لاستخدام شفرة غير صالحة.

باختصار: ما الذي تبحث عنه لا يمكن أن يتم بشكل قانوني داخل بنية الجملة.

المصدر: W3 Validator


إذا كنت تحاول إضافة صورة في أحد الأزرار ديناميكيًا استنادًا إلى سياق مشروعك ، فيمكنك استخدام؟ تتخذ للرجوع إلى المصدر استنادا إلى النتيجة. هنا أستخدم تصميم mvvm للسماح لقيمة Model.Phases [0] بتحديد ما إذا كنت تريد ملء الزر الخاص بي مع صور لمصباح أو إيقاف تشغيله استنادًا إلى قيمة طور الضوء.

لست متأكدا إذا كان ذلك يساعد. أنا أستخدم JqueryUI و Blueprint و CSS. يجب أن يسمح لك تعريف الفئة بنمط الزر بناءً على ما تريد.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>     


إذا كنت لا ترغب في تعيين خاصية خلفية ، فلا يمكنك تعيين سمة src لصورة باستخدام CSS فقط.

بدلا من ذلك يمكنك استخدام جافا سكريبت للقيام بمثل هذا الشيء.


استخدمت حل div الفارغ ، باستخدام CSS هذا:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>

انهم على حق. IMG هو عنصر محتوى و CSS حول التصميم. ولكن ، ماذا عن عند استخدام بعض عناصر المحتوى أو الخصائص لأغراض التصميم؟ لدي IMG عبر صفحات الويب الخاصة بي التي يجب أن تتغير إذا قمت بتغيير النمط (CSS).

حسنا هذا هو الحل لتحديد العرض التقديمي IMG (لا حقا الصورة) في نمط CSS.

  1. إنشاء صورة gif شفافة 1x1 أو png.
  2. قم بتعيين "src" لـ IMG إلى تلك الصورة.
  3. تحديد العرض التقديمي النهائي باستخدام "background-image" في نمط CSS.

أنه يعمل مثل السحر :)


بعض البيانات التي سأغادرها في HTML ، لكن src بشكل أفضل في CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}

بقدر ما أنا على علم ، لا يمكنك. CSS حول نمط ومحتوى src الصورة.


طريقة بديلة

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>

كود HTMl:

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

رمز Css:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

لقد درست html بعد المدرسة لبضعة أيام ، وأردت معرفة كيفية القيام بذلك. اكتشف الخلفية ثم ضع 2 و 2 معًا. هذا يعمل 100 ٪ راجعت ، إن لم يكن تأكد من ملء الأشياء الضرورية !!! نحن بحاجة لتحديد الطول ، لأنه بدونها لن يكون هناك شيء !!! سأترك هذه القشرة الأساسية التي يمكنك إضافتها.

مثال:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS نعم أنا مستخدم لينكس ؛)


لا يمكنك تعيين سمة الصورة src عبر CSS. أقرب ما يمكن الحصول عليه هو ، كما تقول ، background أو background-image . لا أوصي بذلك على أي حال لأنه غير منطقي إلى حد ما.

ومع ذلك ، هناك حل CSS3 متاح لك ، إذا كانت المستعرضات التي تستهدفها قادرة على استخدامها. استخدام content:url كما هو موضح في إجابة Pacerier . يمكنك العثور على حلول أخرى عبر المتصفح في الإجابات الأخرى أدناه.


لقد وجدت طريقة أفضل من الحلول المقترحة ، لكنها تستخدم صورة الخلفية بالفعل. طريقة متوافقة (لا يمكن تأكيدها لـ IE6)

<img src="pathTo/myImage.jpg"/>

CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

لا ينظر إلى الصورة القديمة وينظر إلى الجديد كما هو متوقع.


الحل الأنيق التالي يعمل فقط من أجل webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

من المحتمل أن تفشل أي طريقة تستند إلى background أو background-image عندما يقوم المستخدم بطباعة المستند مع تعطيل "ألوان وصور الخلفية " . وهو للأسف الافتراضي للمتصفح العادي.

والطريقة الوحيدة الملائمة للطباعة والمتوافقة مع المتصفح هنا هي الطريقة التي اقترحها Bronx.


هنا هو حل جيد جدا -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

إيجابيات وسلبيات):
(+) يعمل مع صورة متجهة ذات عرض / ارتفاع نسبي (شيء لا answer )
(+) هو متصفح متقاطع (يعمل أيضًا مع IE8 +)
(+) يستخدم CSS فقط. لذلك لا حاجة لتعديل img src (أو إذا لم يكن لديك وصول / لا تريد تغيير سمة img src الموجودة بالفعل).
(-) آسف ، أنه يستخدم السمة css الخلفية :)


وأود أن أضيف هذا: يمكن أيضا وضع صورة background-position: xy; مع background-position: xy; (x horizontal y vertical). (..) حالتي ، CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)

يمكنك تحديد صورتين في شفرة HTML الخاصة بك واستخدام display: none; لتحديد أيهما سيكون مرئيًا.





image