科技美学

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  90 随笔 :: 0 文章 :: 1 评论 :: 69570 阅读

这实现思路其实很简单

需求:
1. 图片比原来的<div>大,需要切割图片。
2. 图片左上角显示标签

解决思路:

1. 把照片设置成div的backgroundImage,然后用CSS3切割图片。

.gobalPostImgHeaderCentered {
    display: inline-block;
    width: 170px;
    height: 130px;
    background-position: center center;
    background-size: cover;
}

2. 把小标签的Position设置在母DIV的左上角

复制代码
.gobalPostImgTag {
    background-color: #262626;
    color: #ffffff;
    width: 45px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}
复制代码

 

posted on   chankuang  阅读(726)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示