gpt4 book ai didi

css - 动态替换 css 标题图片

转载 作者:行者123 更新时间:2023-11-28 18:43:35 24 4
gpt4 key购买 nike

我有一个基于 css 的布局,在我的 Rails 应用程序的页面顶部有一个通用标题图像。有一个类(class)模型将有一个可选的 Logo 图像,如果它存在,当用户正在查看类(class) Material 时,它有望取代标题图像。这可能吗?我该怎么做?

标题的 css 在下面...

#header{height:116px;width:100%;background:url('logo.jpg') top center no-repeat;}

该应用程序位于 ...,当用户登录并单击类(class)时,我希望类(class) Logo 替换标题图像。

最佳答案

如果我对你的问题的理解正确,一些模型定义了一个标志。在这种情况下,我不会乱用 CSS - 或者至少不会乱用 Assets 文件,因为它们应该是静态的。

您可以在布局中定义 Logo :app/viev/layouts/application.html.erb 只需在那里创建如下内容:

<head>
..
<style type="text/css">
#header { background-image: url("<%= @logo_path || 'logo.jpg' %>"); }
</style>

<head>
<% if @logo_path %>
<style type="text/css"> #header { .... } </style>
<% end %>

然后,在某些 Controller 或操作或某些 View 中,如果您想让 Logo 与默认 Logo 不同,只需设置实例变量@logo_path即可。

在您的静态 CSS 中,您可以定义默认的背景图片,并确保布局中的这条规则比静态资源中的规则更重要。如果有疑问,请在布局规则中添加 !important 子句。

当然,如果谈论 dynamically 你指的是 JavaScript,那么你可以直接将脚本和 Logo 路径包含在给定元素的 onclick 属性中,在类似于这样的方式:

<span onclick="replace_logo('<%= model.logo_path %>')">....</span>

replace_logo 函数并不难写。

关于css - 动态替换 css 标题图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10981024/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com