javascript – 如何在不使用照片编辑器的情况下实现此目的？

发布时间：2020-12-14 22:39:24 所属栏目：资源来源：网络整理

导读：我可以改变：成：不使用照片编辑器这是CSS和HTML代码我无法上传徽标,因为我应该至少有10个声望发布2个以上的链接,所以我可能会将其插入另一个评论中 header { background-color: rgba(255,255,0.9); height: 50px; display: flex; flex-direction: row;

我可以改变：

enter image description here

成：

enter image description here

不使用照片编辑器

>这是CSS和HTML代码
>我无法上传徽标,因为我应该至少有10个声望发布2个以上的链接,所以我可能会将其插入另一个评论中

header {
  background-color: rgba(255,255,0.9);
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 2;
}

header .logo {
  position: fixed;
  left: 50%;
  top: 13px;
  display: inline-block;
}

.background-image {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
  background-size: 100%;
}


最佳答案
您可以使用不透明度来创建半透明图像,通过将其调整为您需要的任何内容,您可以使用它.
但是,如果您还想将图像的颜色更改为更暗,则可以使用CSS过滤器.您可以通过调整色调使其变暗/栗色/褐色.值得注意的是浏览器支持 –  https://caniuse.com/#feat=css-filters

header {
  background-color: rgba(255,0.9);
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 2;
}

header .logo {
  position: fixed;
  left: 50%;
  top: 13px;
  max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}

.background-image {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!