css 样式随笔记

LinkMin

已于 2024-07-11 11:10:17 修改

阅读量38

点赞数

文章标签： css 笔记前端

于 2023-06-13 09:25:33 首次发布

本文链接：https://blog.csdn.net/LinkMin/article/details/131181562

版权

实现滚动条隐藏

.div {
    height: 300px
    overflow-x: hidden;
    overflow-y: auto;
}
.div::-webkit-scrollbar {
  	display: none;
}

css 图片前景色加文字

<div class="image-with-text">
  <img src="your-image-url.jpg" alt="description of image">
  <div class="text-overlay">
    <h2>Your Text Here</h2>
  </div>
</div>


.image-with-text {
  position: relative;
}

.image-with-text img {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-overlay h2 {
  color: #000;
}

通过将该元素设置为相对定位，我们可以使其成为绝对定位的文本叠加层的参考点

颜色配置

'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66',
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                      '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                      '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                                      '#FFB7DD','#660077','#FFCCCC','#FFC8B4','#550088',
                                      '#FFFFBB','#FFAA33','#99FFFF','#CC00CC','#FF77FF',
                                      '#CC00CC','#C63300','#F4E001','#9955FF','#66FF66'