背景图片网址中的属性

Question

首先看一下我的代码：

图像：

<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>

背景URL：

<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

在图像中，我可以在jquery中使用属性src

attr("src");

但是如何在后台图像URL中实现呢？我编写了这段代码并添加了一个属性，但是它不起作用，有什么主意吗？

<div class="small" style="background-image: url(attr(data-image-src='http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

attr("data-image-src");

现在，我希望发生这种情况的原因是，如果您要查看此CodePen：

codepen

示例代码是图像，他们在jquery代码中使用了attr（src），但我希望它是背景图像URL，而不是图像。

Answer 1

我认为您错过了属性中的单引号。

更改

<div class="small" style="background-image: url(http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

至

<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

希望这会有所帮助。

Answer 2

首先，您必须将''设置为网址

 <div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

要获取背景图片的网址：

var url=$('.small').attr('src')
$('.large').css('background-image',"url('"+ url + "')");   

.large{
    background-repeat: no-repeat;
    width: 175px;
    height: 175px;
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
<div class="large"></div>

Answer 3

要在jQuery中获得background-image，您可以使用：

var urlFull = $('.small').css('background-image');
//You will get the full value here
url = urlFull.split('"');
//But for using it properly you have to split it and get the url with `"` which will be holding the url.

console.log(url[1]); //You will get URL here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')"></div>

现在是您的真实问题：

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;
  var urlFull = $('.small').css('background-image');
  //You will get the full value here
  url = urlFull.split('"');
  //But for using it properly you have to split it and get the url with `"` which will be holding the url.
  //console.log(urlFull);

  $(".large").css("background-image", urlFull);

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = url[1];

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

/*Some CSS*/

* {
  margin: 0;
  padding: 0;
  text-align: center
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none;
  display: inline-block;
}


/*Lets create the magnifying glass*/

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*hide the glass by default*/
  display: none;
  background-repeat: no-repeat;
}


/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  width: 200px;
  height: 400px;
  float: left;
  background-size: contain;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lets make a simple image magnifier -->
<div class="magnify">

  <!-- This is the magnifying glass which will contain the original/large version -->
  <div class="large"></div>

  <!-- This is the small image -->
  <div class="small" style="background-image:url('http://thecodeplayer.com/uploads/media/iphone.jpg')" width="200" />
</div>
</div>

Codepen 。

我希望这对你有帮助。