背景图像仅在CSS网格的一列上?

Question

div {
display: grid;
width: 100%;
grid-template-columns: 60% 40%;
border: 1px solid brown;
}
.gridItem {
width: 100%;
height: 50px;
grid-column: 2/3;
border: 1px solid orange
}

<div>
<div class="gridItem"><p>Test 1</p></div>
<div class="gridItem"><p>Test 2</p></div>
<div class="gridItem"><p>Test 3</p></div>
</div>

我怎么能得到有一个背景图像设置在测试1，测试2和测试3的左侧?那么在第一个"棕色"栏中呢?我不能编辑的HTML文件悲哀(它被锁定由于CMS)

还是我应该使用<table>?

Answer 1

将其应用于整个网格并控制其大小

.box {
display: grid;
grid-template-columns: 60% 40%;
border: 1px solid brown;
background: 
url(https://picsum.photos/id/104/800/800) 
left/ /* on the left */
60% auto  /* take only 60% of width */
no-repeat; /* don't repeat */
}
.gridItem {
width: 100%;
height: 50px;
grid-column: 2/3;
border: 1px solid orange
}

<div class="box">
<div class="gridItem">
<p>Test 1</p>
</div>
<div class="gridItem">
<p>Test 2</p>
</div>
<div class="gridItem">
<p>Test 3</p>
</div>
</div>

或者使用伪元素对位置有更多的控制:

.box {
display: grid;
grid-template-columns: 60% 40%;
border: 1px solid brown;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:60%;
background: url(https://picsum.photos/id/104/800/800) center/cover;
}
.gridItem {
width: 100%;
height: 50px;
grid-column: 2/3;
border: 1px solid orange
}

<div class="box">
<div class="gridItem">
<p>Test 1</p>
</div>
<div class="gridItem">
<p>Test 2</p>
</div>
<div class="gridItem">
<p>Test 3</p>
</div>
</div>