我们的图像源url在CSS背景图像url使用javascript或jquery

qzlgjiam 于 2023-02-08 发布在 jQuery

关注(0)|答案(4)|浏览(188)

我在Javascript新手。我想使用一个图像源代码在CSS背景图像网址使用Javascript。
例如，<img class="user-profile-box-img" src="https://img.freepik.com/free-photo/portrait-young-man-using-mobile-phone-while-standing-outdoors_58466-16294.jpg"/>
这是一个用来显示图片的图片源代码。我想在css中使用相同的图片url**background-image: url("")**，这样我就不需要写两次相同的url了。我怎么用javascript或jquery来做呢？
总之，我只在img标记中写入一次图像src，它将自动添加background-image: url("");
代码示例：

.same-image-div {
    width: 100%;
    margin: auto;
    padding: 60px 15px!important;
background-image: linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)),    
url(" here I want the "user-profile-box-img" class image src url ");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.user-profile-box-img{
width: 50%;
margin: auto;
}

<div class="same-image-div">
<img class="user-profile-box-img" src="https://img.freepik.com/free-photo/portrait-young-man-using-mobile-phone-while-standing-outdoors_58466-16294.jpg"/>
</div>

jquery

来源：https://stackoverflow.com/questions/75345418/us-image-src-url-in-css-background-image-url-using-javascript-or-jquery

4条答案

按热度按时间

bnlyeluc1#

下面是使用JavaScript执行此操作的一种方法：

const img = document.querySelector('.user-profile-box-img');
const div = document.querySelector('.same-image-div');
div.style.backgroundImage = `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url(${img.src})`;

下面是使用jQuery的一种方法：

const img = $('.user-profile-box-img');
const div = $('.same-image-div');
div.css('background-image', `linear-gradient(rgba(38, 70, 235, 0.4), rgba(38, 70, 235, 0.4)), url(${img.attr('src')})`);

赞(0）回复(0）举报 2023-02-08

zzwlnbp82#

要使用jquery获取图像src，可以用途：$('.user-profile-box-img').attr('src');
然后将其添加到**.same-image-div类背景图像：url（“”）**属性通过Jquery或Javascript实现。

赞(0）回复(0）举报 2023-02-08

tyu7yeag3#

如果你想把src属性“移动”到同一个元素的CSS属性中，你应该在jQuery中这样做（使用一点元素缓存）：

let element = $('img.user-profile-box-img');
element.css('background-image', 'url('+element.attr('src')+')');

赞(0）回复(0）举报 2023-02-08

mm9b1k5b4#

如果你想在CSS背景中使用图像源代码，使用javascript的图像URL。你已经使用javascript简单地设置了图像如下：元素.样式.背景图像=“URL（'img_tree.png'）";

document.body.style.background-image = "URL('https://images.unsplash.com/photo-1661956602139-ec64991b8b16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2765&q=80')";

赞(0）回复(0）举报 2023-02-08

我来回答

我们的图像源url在CSS背景图像url使用javascript或jquery

4条答案

相关问题

热门标签

最新问答