在选择器之前使用css

Question

我正在尝试将一个图像重叠在另一个图像上，并从中创建一个圆形图像。

<span onclick="someFunction()" id="swatch_123456" class="slider-color-swatches" style="background-image: url(anyImage.png);"></span> 

.slider-color-swatches{ 
    position: relative; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: top; 
    overflow: hidden; 
    margin-bottom: 10px; 
    margin-right: 10px; 
} 
.slider-color-swatches::before{ 
    content: ''; 
    position: absolute; 
    background-image: url('anyOtherIamge.pnenter image description hereg'); 
    left: 20%; 
    width: 100%; 
    height: 200%; 
    top: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Here are the images as to what I want to do and where Iam able to get so far

Answer 1

试试这个.. 可工作..

{ 
    width: 28px; 
    height: 28px; 
    overflow: hidden; 
    display: block; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    margin-bottom: 10px; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    margin: 0 auto; 
} 

Answer 2

尝试增加display: block;您::before元素。 这样做会使您的宽度和高度生效。

此外，加入margin: auto;将保持居中。

例子：

.slider-color-swatches::before { 
    content: ''; 
    position: absolute; 
    display: block; 
    margin: auto; 
    background-image: url('anyOtherIamge.pnenter image description hereg'); 
    left: 20%; 
    width: 100%; 
    height: 200%; 
    top: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); } 

如果你想尝试不同的方法，看看clipping and masking！