Question

我有两个 cells ，我使用JavaScript从一组图像中为 cells 设置了背景图像。

我有图片

image1= 150*150仅命名为image1一次

image2=150*150仅命名为image2一次

当我将图像设置为单元格的背景图像时，每个单元格中的图像都会重复出现

即Image1在cell[1]中也出现了3次。

`如何删除它并使背景图片仅在 Fit to theEntire cell 单元格中一次出现。

var images = [
  {label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
  {label: '2',url: 'https://via.placeholder.com/150x150.jpg?text=image2'}
];

function bgsetting() {
  boxtags = document.getElementsByClassName("cell");

  boxtags[0].style.backgroundImage = 'url(' + images[0].url + ')'; 
  boxtags[1].style.backgroundImage = 'url(' + images[1].url + ')'; 

}

bgsetting();

.cell {
  width: calc(33.3% - 4px);
  border: 2px solid #333;
  margin: -2px;
  background-color: #99ffff;
  height: 15vh;
  display: inline-flex;
  align-items: center;
  background-size:contain;
}

<div id="container">
  <div class="cell"  ></div>
  <div class="cell"  ></div>
</div>

Answer 1

您必须将background-repeat属性设置为no-repeat。这将确保不重复背景图像。图片只会显示一次。

要使图像适合每个单元格，可以使用background-size: cover和background-position: center。

var images = [{label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url: 'https://via.placeholder.com/150x150.jpg?text=image2'}];

function bgsetting() {
  boxtags = document.getElementsByClassName("cell");

  boxtags[0].style.backgroundImage = 'url(' + images[0].url + ')'; 
  boxtags[1].style.backgroundImage = 'url(' + images[1].url + ')'; 
}

bgsetting();

.cell {
  width: calc(33.3% - 4px);
  border: 2px solid #333;
  margin: -2px;
  background-color: #99ffff;
  height: 15vh;
  display: inline-flex;
  align-items: center;
  background-size:contain;
  
  /* style to set image properly*/
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center; 
}

<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Answer 2

添加此CSS，您就完成了...

python -m dataflow --runner "DataflowRunner" \
                   --jobName "<jobName>" \
                   --topic "<pub-sub-topic"" \
                   --project "<project>" \
                   --dataset "<dataset>" \
                   --worker_machine_type "n1-standard-2" \
                   --temp_location "gs://<bucket-name>/tmp/"

.cell {
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}

var images = [

{label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url: 'https://via.placeholder.com/150x150.jpg?text=image2'}];

function bgsetting() 
{
boxtags = document.getElementsByClassName("cell");

boxtags[0].style.backgroundImage = 'url(' + images[0].url + ')'; 
boxtags[1].style.backgroundImage = 'url(' + images[1].url + ')'; 

}

bgsetting();

.cell {
  width: calc(33.3% - 4px);
  border: 2px solid #333;
  margin: -2px;
  background-color: #99ffff;
  height: 15vh;
  display: inline-flex;
  align-items: center;
  background-size:contain;
  background-repeat:no-repeat;
      background-size: cover;
    background-position: center;
}

如何使用JavaScript在HTML中仅使背景图片出现一次

2 个答案: