Header背景处理方案

最新推荐文章于 2024-01-01 20:52:29 发布

原创

最新推荐文章于 2024-01-01 20:52:29 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #设计

本文介绍了在前端开发中，如何利用图像标识和CSS3的filter属性来创建独特的header背景效果。通过应用blur滤镜实现图像高斯模糊，并可通过添加半透明背景色增加视觉对比，适用于用户头像、书籍封面等详情页设计。

自己在私下项目练习时，遇到的一种header部分背景开发方案，前端小伙伴可以用在我们自己code的项目里面。
应用场景，针对于不同事物具有唯一的图像标识（例如，用户的头像，书籍的封面等）。
我们在设计其详情页时，每一个事物的header部分我们可以这样处理：

借用它们自身唯一的图像标识
例如：

<div class="header">
    <div class="content-wrapper">
        <div class="avatar">
            <img width="64" height="64" :src="user.avatar" alt="">
        </div>
    </div

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PrincessofUtopia

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【全功能图片处理工具详解】基于Streamlit的现代化图像处理解决方案

XiaoMu_001的博客

08-31

1173

【全功能图片处理工具详解】基于Streamlit的现代化图像处理解决方案

firefox中div+css的外层背景色不见的解决方法

12-13

在 IE 和 Chrome 中，由于浏览器的差异性处理，这个情况可能不会显现出来，但在 Firefox 中，外层 `div` 的背景色会显得不完整或消失。为了解决这个问题，通常有以下两种方法： 1. 添加清浮动元素（`.clear`）： ...

1 条评论您还未登录，请先登录后发表或查看评论

html的header背景图片,关于在HTML插入背景图片的问题

weixin_42551260的博客

06-04

9305

曾经在html中编写网页的时候，将外部的css样式表链接到网页中，其它像：background-color . padding , margin 等都可以正常起作用，但就是background-image不起作用，而且有时一气之下将background-image:url(“”绝对路径“”) ;就可以显示了，但是我们非常不提倡这种绝对路径的写法，那么出现这个现象的原因到底是什么呢？注意：：在cs...

Header组件(背景图)

lvlemo的博客

09-26

2916

Hello Music .m-header{ position: relative; height: 44px; text-align: center; color: lightblue; background: lightgray;

CSS中position和header和overflow和background

weixin_30650859的博客

08-24

263

1 <!DOCTYPE html> 2  3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 &lt...

练一练，亲自动手做一个专业级的 Hero Header 动效

前端达人

09-03

639

大家好，关于惊艳的Hero Header（不知怎么翻译，暂且这么叫吧）的动效大家见过不少，在页面打开后的瞬间，好的 Hero Header 动效会给用户留下好的印象，如何抓住用户的第一印象呢。从设计角度方面来说，好的 Hero Header 都有以下要素：抢眼的标题，头条Call-To-Action 按钮令人印象深刻的背景图或视频嵌入式类型的描述视频或动画介绍特色内容的滚动效果品牌元素 - l...

antd5 Layout中Header与Sider背景色注入

w55100的博客

01-01

2852

截止本文antd@5.12.5，通过ConfigProvider的方式统一修改主题色，会出现Sider与Header无法修改背景色的问题。这种行为与官方提供的中展示的样式并不一致。在中，使用算法，默认状态下获得的背景色应该是#000。

自定义HeaderBar

09-17

自定义HeaderBar可以让开发者跳出系统的限制，实现更个性化的界面设计，如独特的颜色方案、动态效果或者额外的功能按钮。首先，我们需要创建一个新的布局文件来定义自定义HeaderBar。这个布局文件通常会包含一个...

php输出xml必须header的解决方法

12-19

此外，文章中还提到了其他可能遇到的问题和解决方案，例如使用`simplexml_load_file`加载XML文件、处理PHP中的XML数据、使用`XMLWriter`创建RSS输出，以及使用`XMLReader`或`DOMDocument`等类进行XML处理。...

【无标题】html前端

weixin_50711598的博客

05-08

160

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>物管伺服器管理系统(runoob.com)</title> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } div.img { ...

header背景透明，文字不透明，背景加投影

st187187的专栏

01-30

1756

.header { background:rgba(255, 255, 255, 0.9) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/ filter:Alpha(opacity=90);background:#FFF; /*实现IE背景透明 width

<header>标签为什么不能改变背景颜色呢？

梁同学与Android

10-27

4358

今天在写HTML5标准布局的时候，遇到了一个这样的问题，header标签不能够改变背景颜色，之后在网上查了之后，找到了问题的所在。代码实例如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> &l...

饿了么webapp之header的背景

chiuwingyan的博客

10-19

1761

效果图：就是把header的背景图实现以上效果，模糊效果，在遮盖罩下方，图片和商家头像图片一样。我一开始的想法是直接给header设置背景图片，但是图片是商家头像，数据是通过后端获取的，那么css可以使用js的数据吗？网上查了一下，答案是可以的。我们知道CSS里是可以控制某些HTML元素的属性的，譬如background-image等等，而在URL里添加Javascri

自定义SmartRefreshLayout的Header和Footer

白云天的博客

06-27

1万+

使用SmartRefreshLayout自定义Header并不难，第一个例子重在介绍需要实现的方法，第二个例子为正确的使用示例；Footer类似。一、经典Header 实现一个最简单的经典Header（没有更新时间） 1.1需求分析我们的经典Header需要一个标题文本、刷新动画、下拉箭头。由此我们可以选定一个继承LinearLayout并列出成员变量 public class Classic...

自定义headerView设置背景色无效的解决方案

小魏同学的随想随写

01-04

4387

自定义headerView设置背景色无效，提示： Changing the background color on a UITableViewHeaderFooterView loaded from a xib says to use contentView.backgroundColor instead 但是调用 contentView.background也无效，因为自定义的h

background设置

LzzMandy的博客

12-06

492

1、简单语法： background：颜色 url 平铺方式水平垂直一种默认的方式。 2、例子： background：#fff url(smile.png) no-repeat center bottom;

element-card用法总结

最新发布

05-20

### 更改 C# 自定义 TaskPane 标题栏的背景色在 Microsoft Office 的 VSTO (Visual Studio Tools for Office) 开发环境中，`CustomTaskPane` 是一种用于扩展应用程序功能的方式。然而，VSTO 并未直接提供修改 `CustomTaskPane` 标题栏背景颜色的方法[^1]。尽管如此，可以通过一些间接方式实现这一目标： #### 方法一：使用 Windows API 修改窗口样式通过调用 Windows API 可以获取并操作 `CustomTaskPane` 所属的窗口句柄 (`HWND`)。以下是具体实现思路： 1. 使用 P/Invoke 调用必要的 Win32 函数来访问和修改窗口属性。 2. 针对特定控件（即标题栏），设置新的背景颜色或图片。下面是一个简单的代码示例展示如何更改窗口背景颜色： ```csharp using System; using System.Runtime.InteropServices; public class CustomTaskPaneHelper { [DllImport("user32.dll", SetLastError = true)] private static extern IntPtr FindWindowEx(IntPtr hwndParent, IntPtr hwndChildAfter, string lpszClass, string lpszWindow); [DllImport("user32.dll")] private static extern int SetWindowLong(IntPtr hWnd, int nIndex, uint dwNewLong); public const int GWL_STYLE = -16; public const int WS_VISIBLE = 0x10000000; public void ChangeHeaderBackground(CustomTaskPane taskPane, Color newBackgroundColor) { // 获取父窗口句柄 var windowHandle = GetWindowHandle(taskPane); if (windowHandle != IntPtr.Zero) { // 查找子窗口（标题栏） var titleBarHandle = FindWindowEx(windowHandle, IntPtr.Zero, "SOTitleBar", null); if (titleBarHandle != IntPtr.Zero) { // 设置新背景颜色 Brush brush = new SolidBrush(newBackgroundColor); WndProcDelegate procDelegate = new WndProcDelegate(WndProcHandler); SetWindowLong(titleBarHandle, GWL_STYLE, WS_VISIBLE | /*其他风格*/ ); // 更新窗口显示 InvalidateRect(titleBarHandle, IntPtr.Zero, true); } } } private delegate IntPtr WndProcDelegate(IntPtr hwnd, uint msg, IntPtr wParam, IntPtr lParam); private IntPtr WndProcHandler(IntPtr hwnd, uint msg, IntPtr wParam, IntPtr lParam) { switch (msg) { case WM_ERASEBKGND: using (Graphics g = Graphics.FromHdc(wParam)) { Rectangle rect = new Rectangle(0, 0, this.ClientSize.Width, this.ClientSize.Height); g.FillRectangle(Brushes.Red, rect); // 替换为所需颜色 } return new IntPtr(1); // 表明已处理消息 } return CallWindowProc(oldWndProc, hwnd, msg, wParam, lParam); } } ``` 注意此方法可能因版本差异而失效，并且需要深入研究 Office 应用内部结构才能成功定位到实际负责渲染的部分[^2]。 #### 方法二：替换整个窗体设计另一种更可靠但也更加复杂的做法是完全重写默认界面布局。这通常涉及创建自定义用户控件作为替代方案加载进来代替标准面板头部区域的内容呈现逻辑[^3]。 ---