css 箭头样的背景 |在文本框里加图片css

实现箭头背景的方法非常简单，只需要使用 CSS 中的伪元素 :before 或 :after 即可。通过为该伪元素添加箭头背景图，再确定其定位，就可以实现自定义箭头背景。

.arrow-bg {
position: relative;
background-color: #fff; /* 背景色 */
padding: 20px;
}
.arrow-bg:before {
content: "";
position: absolute;
top: -20px;    /* 距离上方的距离 */
left: 50%;     /* 定位到父元素的中心 */
margin-left: -20px;   /* 微调左右位置 */
border-width: 20px;   /* 箭头大小 */
border-style: solid;
border-color: #fff transparent transparent transparent; /* 箭头颜色 */
}

在上述代码中，首先要设置目标元素的 position 为 relative，这样在其内部创建的伪元素才能进行绝对定位。接着，在伪元素中设置箭头的位置、大小和颜色。

利用这个方法，大家可以轻松的实现自定义大小、颜色的简洁美观的箭头背景，同时可以根据实际需求进行微调。