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




gallery background (21)

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

$("img.myClass").attr("src", "http://somwhere");

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

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

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

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

أريد القيام بذلك دون استخدام background أو background-image: الخصائص في 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>

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

هناك حاجة إلى حل CSS خالص في الحالات التي يتم فيها الحصول على محتوى من موقع آخر ، وبالتالي لا تتحكم في HTML الذي يتم تسليمه. في حالتي ، أحاول إزالة العلامة التجارية لمحتوى مصدر مرخص حتى لا يضطر المُرخص إلى الإعلان عن الشركة التي يشتري المحتوى منها. لذلك ، أزيل شعارهم مع الاحتفاظ بكل شيء آخر. يجب أن أشير إلى أن هذا ضمن عقد موكلي للقيام بذلك.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}

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

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


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

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

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

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


هناك حل اكتشفته اليوم (يعمل في IE6 + ، FF ، Opera ، Chrome):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

كيف تعمل:

  • تقلصت الصورة حتى لم تعد مرئية بالعرض والارتفاع.
  • ثم ، تحتاج إلى "إعادة تعيين" حجم الصورة مع الحشو. هذا واحد يعطي صورة 16x16. بالطبع يمكنك استخدام حشو اليسار / الحشو أعلى لجعل الصور مستطيلة.
  • وأخيرا ، يتم وضع الصورة الجديدة هناك باستخدام الخلفية.
  • إذا كانت صورة الخلفية الجديدة كبيرة جدًا أو صغيرة جدًا ، فإنني أوصيك باستخدام background-size على سبيل المثال: background-size:cover; التي تناسب صورتك في المساحة المخصصة.

كما أنه يعمل على تقديم المدخلات الصور ، فإنها تبقى قابلة للنقر.

راجع العرض التجريبي المباشر: http://www.audenaerde.org/csstricks.html#imagereplacecss

استمتع!


أو يمكنك القيام بذلك الذي وجدته في interweb thingy.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

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

في مشروع أعمل عليه الآن ، قمت بإنشاء قالب قالب كتلة البطل

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</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 نعم أنا مستخدم لينكس ؛)


إذا كنت تحاول إضافة صورة في أحد الأزرار ديناميكيًا استنادًا إلى سياق مشروعك ، فيمكنك استخدام؟ تتخذ للرجوع إلى المصدر استنادا إلى النتيجة. هنا أستخدم تصميم 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")"/>     


لقد وجدت طريقة أفضل من الحلول المقترحة ، لكنها تستخدم صورة الخلفية بالفعل. طريقة متوافقة (لا يمكن تأكيدها لـ 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 */

}

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


مجموعة من الطرق الممكنة لتعيين الصور من 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 ، وهو مسودة العمل حاليًا.


استخدام content:url("image.jpg") .

حل كامل للعمل ( Live Demo ):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

اختبار والعمل:

  • Chrome 14.0.835.163
  • سفاري 4.0.5
  • Opera 10.6

تم اختباره ولا يعمل:

  • FireFox 40.0.2 (مراقبة أدوات Network Developer ، يمكنك رؤية تحميل عنوان URL ، ولكن لا يتم عرض الصورة)
  • Internet Explorer 11.0.9600.17905 (لا يتم تحميل عنوان URL أبدًا)

وأود أن أضيف هذا: يمكن أيضا وضع صورة 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; 
  (..)
} 
(...)

مجرد استخدام HTML5 :)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

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

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


طريقة بديلة

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

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

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

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

المصدر: W3 Validator


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

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

لاحظ أنها ستحمل مسبقًا جميع الصور ، كما هو الحال مع CSS backround-image ، ولكن بخلاف تغيير img src عبر JS.


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

على سبيل المثال ، لنفترض أنك تمتلك HTML التالي:

<div id="headerImage"></div>

... و CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

بعد بضعة أيام ، تقوم بتغيير موقع الصورة. كل ما عليك فعله هو تحديث CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

خلاف ذلك ، سيكون عليك تحديث السمة src للعلامة <img> المناسبة في كل ملف HTML (على افتراض أنك لا تستخدم لغة برمجة نصية من جانب الخادم أو CMS لأتمتة العملية).

كما أن صور الخلفية مفيدة إذا كنت لا تريد أن يتمكن المستخدم من حفظ الصورة (على الرغم من أنني لم أكن في حاجة للقيام بذلك).





html css image