#css #web2py
#css #web2py
Вопрос:
Я хотел бы иметь способ скользить по изображению или сообщению над диаграммой, чтобы показать какое-либо сообщение до / после ввода данных пользователем. Пока что мое изображение отображается только внизу страницы, а не над символом, чтобы его было хорошо видно. Ниже приведен мой код:
def my_chart():
response.files.append(URL('my_default','static/js/pygal-tooltips.min.js'))
response.headers['Content-Type']='image/svg xml'
custom_style = Style(
background='transparent',
plot_background='transparent',
foreground='#53E89B',
foreground_strong='#53A0E8',
foreground_subtle='#630C0D',
opacity='.6',
opacity_hover='.9',
transition='400ms ease-in',
colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53')
)
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=BlueStyle)
data = db(db.amount).select()
chart.add('W', [i.amount for i in data])
return chart.render()
def myWeight():
chart= URL('my_default', 'amount_chart')
form = SQLFORM(db.amount, submit_button=T('Submit')).process()
news = ''.join(str(item) for item in ['Hi ', auth.user.first_name, ' I want to make sure that this paragraph appears infron of the chart so that I can adda paragraph/message in'])
return dict(chart = chart,form=form, news=news)
И это мое мнение:
<figure>
<embed type="image/svg xml" src="{{=chart}}" />
<div class="wrapper">
{{=XML(news)}}
</div>
</figure>
<h1>{{=form}}</h1>
Ответ №1:
У меня есть кое-что приятное. Но все равно нужно вставить изображение в качестве фона.: {{расширить ‘layout.html ‘}}
<style>
#note {
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #FAE3E3;
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-70px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-70px); }
10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-70px);
-webkit-animation: slideDown 12.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 12.5s 1.0s 1 ease forwards;
}
</style>
<div id="note">
{{=XML(news)}}
</div>
<figure>
<embed type="image/svg xml" src="{{=chart}}" />
</figure>
<h1>{{=form}}</h1>