如何使用 css 更改标签内的图像？答案

【问题标题】：How can I change the image inside a tag with css?如何使用 css 更改标签内的图像？
【发布时间】：2022-01-14 19:45:07
【问题描述】：

我要做的是更改“payment_method_micuentawebstd”标签内的图像和图像的“宽度”属性。

<label for="payment_method_micuentawebstd">
        Creditcard <img style="max-width: 85px; max-height: 30px;" src="https://yokiut.com/wp-content/plugins/woo-micuentaweb-payment//assets/images/micuentaweb.png" alt="Pago con tarjeta de débito / crédito">   </label>

我试着这样做，但我找不到方法：

#payment > ul > li.wc_payment_method.payment_method_micuentawebstd > label > img{
    max-width: 100% !important;;
/*content: url("https://yokiut.com/wp-content/uploads/2021/12/Tarjetas.png");*/
}

编辑：我设法改变了宽度，但“内容”并没有改变图像，它只是把它放在 html 的“src”下面。

【问题讨论】：

background-image 在元素上设置图像，例如在div 中，它不会影响img 源

标签： javascript html css image label

【解决方案1】：

试试这个，

您可能没有正确使用选择器。需要查看 HTML，但根据您的 CSS 选择器，我相应地添加了 HTML。

如果您的 HTML 不同，请添加/更新问题。

#payment > ul > li.wc_payment_method.payment_method_micuentawebstd > label > img{
    max-width: 100%;
    /* random image url */
    content:url("https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578");
    
    /* 
    image url provided by you is commented to see change
    content:url("https://yokiut.com/wp-content/uploads/2021/12/Tarjetas.png"); */
}

<div id="payment">
    <ul>
      <li class="wc_payment_method payment_method_micuentawebstd">
        <label for="payment_method_micuentawebstd">
            Creditcard 
            <img style="max-width: 85px; max-height: 30px;" src="https://yokiut.com/wp-content/plugins/woo-micuentaweb-payment//assets/images/micuentaweb.png" alt="Pago con tarjeta de débito / crédito">  
         </label>
      </li>
    </ul>
</div>

【讨论】：